序 


2011 年 12 月 我 就 开始 关注 Android 领 域 中 一 个 技术 难度 极 富 挑战 性 的 部 分 一 WebKit。 这 个 名 字 听 起 来 如 雷 贯 耳 的 东西 就 是 当前 绝 大 部 分 浏览 器 的 核心 引擎 。 学 习 WebKit 的 过 程 注定 是 艰难 困苦 的 ， 因 为 在 
这 个 领域 一 直 没 有 系统 成 型 的 书籍 ， 仅 有 的 资料 也 是 零碎 片段 。 当 年 为 了 学 习 它 ， 我 甚至 在 Windows 上 编译 了 WebKit， 并 做 了 一 个 简单 的 浏览 器 程序 ， 然 后 试图 利用 Visual Studio 调 试 这 个 浏览 器 来 一 帘 
WebKit 4 4i Ri o 


学 习 WebKit 的 究 境 一 直 延 续 ， 直 到 我 们 结识 了 当时 还 在 百度 从 事 浏览 器 开发 的 孟 德 国 、 王 把 龙 、 周 金利 、 黎 欢 四 位 兄弟 。 这 是 四 个 敢于 挑战 ， 重 视 承 诺 的 年 轻 人 。 他 们 历时 4 年 ， 历 经 跳 档 ， 换 岗 ， 四 人 
各 奔 东 西 ， 但 仍然 坚守 当年 的 承诺 ， 精 诚 合作 ， 完 成 了 深入 理解 Android 系 列 中 最 有 挑战 性 的 WebKit 一 书 。 这 不 仅 是 四 位 作者 的 胜利 ， 也 是 我 和 福 川 的 胜利 。 因 为 这 或 许 是 深入 理解 Android 系 列 从 书 中 唯一 一 
本 由 多 个 作者 共同 撰写 的 书籍 了 。 当 时 做 出 这 样 的 决策 是 需要 勇气 的 。 因 为 多 个 作者 编写 同一 本 书 ， 必 然 会 经 历 前 面 所 说 的 主创 人 员 分 合 的 问题 ， 而 如 何 保持 每 个 作者 高 度 一 致 的 战斗 力 ， 并 统一 、 平 顺 地 
组 合 多 个 作者 的 编撰 文稿 都 是 非常 困难 的 事情 。 值 得 欣慰 的 是 ， 今 天 这 本 WebKit 书 籍 的 出 版 ， 证 明了 我 们 当初 的 决定 和 作者 团队 的 智慧 ， 以 及 他 们 的 努力 都 是 经 得 起 考验 的 。 


如 果 说 深入 理解 Android 系 列 其 他 书籍 是 手术 刀 式 分 析 Android 源 码 的 话 ， 本 书 则 以 提纲 者 领 式 的 讲解 帮助 开发 者 迅速 掌握 WebKit 大 框架 ， 大 脉络 。 我 曾经 就 此 区 别 专 门 和 作者 团队 讨论 过 ， 手 术 刀 式 的 源 
码 分 析 固 然 能 满足 好 奇 心 ， 但 是 在 大 部 分 开发 者 对 WebKit 的 宏观 架构 毫 无 了 解 的 情况 下 ， 贸 然 “ 深 入 ”源码 分 析 ， 将 极 大 浪费 的 读 的 者 时 间 ， 而 且 往往 事倍功半 。 所 以 ， 我 相信 在 本 书 的 内 容 编 畦 上 ， 作 者 
团队 是 认真 负责 的 。 


再 次 感谢 这 四 个 年 轻 人 。 因 为 从 今天 开始 ， 各 位 读者 就 可 以 和 我 一 样 ， 通 过 这 本 书 来 领略 WebKit 的 美 了 。 


邓 凡 平 


a 
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为 什么 要 写 这 本 书 


在 PC 互联 网 时 代 ， 用 户 开启 电脑 后 手动 打开 的 第 一 个 应 用 程序 ， 如 果 不 是 QQ， 那 往往 就 是 浏览 器 。 在 移动 互联 网 无 比 繁荣 的 今天 ， 移 动 浏览 器 虽然 没有 像 PC 浏览 器 那样 占据 资讯 第 一 入 口 的 地 位 ， 但 
浏览 器 引擎 一 个 华丽 的 转身 ， 找 到 了 自己 新 的 、 更 广阔 的 发 展 空间 一 庶 入 到 各 个 超级 App 中 ， 比 如 微 信 、 百 度 搜索 框 等 ， 无 颖 展示 Web 资 源 ， 由 此 可 见 ， 浏 览 器 引擎 依旧 非常 重要 。 


浏览 器 的 重要 性 毋庸 讳言 ， 在 这 便捷 的 工具 中 ， 用 户 只 需 键 入 一 个 文本 的 URL 或 者 点 击 一 个 链接 ， 瞬 间 绚 丽 的 新 页 面 就 展示 在 面前 。 浏 览 器 具备 什么 样 的 魔法 使 这 一 切 悄 然 发生 呢 ? 相信 普通 用 户 和 众 
多 的 前 端 开发 者 都 会 有 这 个 疑问 。 阅 读 开源 的 浏览 器 引擎 代码 (WebKit) ， 可 以 帮 我 们 解 开 这 些 疑 惑 ， 这 正 是 本 书 的 内 容 。 


WebKit 引 擎 内 容 庞 大 复杂 ， 是 一 个 完整 的 网 页 内 容 解 析 工 具 ， 集 成 WebKit 的 具体 平台 只 需 对 接 网 络 库 及 图 形 库 ， 便 可 使 用 WebKit 的 强大 解析 功能 。 利 用 具体 平台 提供 的 图 形 库 及 显示 系统 便 可 实现 网 页 
的 泻 染 和 显示 。WebKit 引 擎 由 众多 的 子 模块 组 成 ， 模 块 功能 高 度 内 聚 ， 彼 此 协同 工作 处 理 数 据 流 。 代 码 考究 ， 格 式 优美 ， 内 容 精 彩 ， 是 开源 代码 中 的 上 品 ， 极 具 研究 和 学 习 价值 。 


由 于 WebKit 的 庞大 ， 初 学 者 往往 无 从 下 手 ， 对 比 Linux Kernel， 虽 然 Linux Kernel 的 源码 复杂 度 高 于 WebKit， 但 相关 领域 已 经 有 大 量 的 优秀 书籍 ， 加 之 操作 系统 、 计 算 机 体系 结构 及 接口 技术 是 计算 机 相关 
专业 学 生 的 必修 课 ， 这 都 使 得 Linux Kernel 的 学 习 曲 线 不 再 陡峭 。 而 在 浏览 器 引擎 方面 ， 至 今 学 习 资 源 仍然 非常 少 ，WebKit 官 网 、Chromium 官 网 、W3C 官 网 、html5tock 等 网 站 虽然 有 一 些 原理 性 和 框架 性 的 描 
述 ， 但 不 够 具体 ， 要 想 真正 了 解 浏 览 器 引擎 还 是 要 跟随 笔者 一 起 阅读 代码 。 


读者 对 象 


本 书 主要 介绍 Android 4.2 平 台 WebKit 的 原理 与 实现 ， 今 天 看 来 虽然 Android 版 本 略 显 陈旧 ， 但 WebKit 的 架构 与 原理 是 没有 变化 的 ， 所 以 本 书 也 可 帮助 读者 理解 其 他 平台 或 其 他 版 本 WebKit 引 擎 浏览 器 的 原 
理 。 


本 书 的 主要 目标 读者 有 如 下 几 类 : 
"WebKit 内 核 工程 师 ; 

“ 手机 浏览 器 及 浏览 器 类 应 用 开发 者 ; 
:前端 开发 工程 师 ; 

“ 对 浏览 器 感 兴趣 的 大 专 院 校 在 校 学 生 。 


为 方便 读者 查阅 代码 ， 笔 者 已 经 将 去 掉 .repo 和 .git 目 录 的 Android 4.2 版 本 的 全 部 源 代 码 ， 上 传 至 百度 网 盘 ， 链 接 为 : http://pan.baidu.com/s/1hqJEyP2。 


如 何 阅读 本 书 


本 书 的 主体 部 分 按 浏览 器 处 理 数 据 的 流程 来 组 织 ， 所 以 建议 读者 从 头 至 尾 阅读 ， 以 便于 完整 地 了 解 WebKit。 当 然 由 于 WebKit 的 各 个 模块 依据 功能 进行 了 清晰 的 划分 ， 读 者 也 可 根据 兴趣 阅读 各 相关 章 


本 书 各 章 内 容 安 排 如 下 : 

第 1 章 作 为 全 书 的 开篇 ， 介 绍 了 Android 全 源码 开发 环境 的 搭建 过 程 ， 读 者 可 在 全 源码 开发 环境 的 基础 上 研究 WebKit 代 码 。 

第 2 章 介绍 浏览 器 工作 原理 及 WebKit 概 览 ， 对 比 了 当前 主流 浏览 器 引擎 ， 讲 解 了 WebKit 的 优 缺点 、 历 史 和 现状 ， 以 及 设计 架构 。 

第 3 章 介绍 WIF 库 ， 包 括 智能 指针 、Assert、 内 存 管 理 与 容器 、 线 程 封装 、WebKit 运 行 时 线程 结构 。 

第 4 章 介绍 Loadetr 与 网 络 库 ， 包 括 Loader 的 设计 与 实现 架构 、 资 源 加 载 流 程 、MainResourceLoader 和 SubResourceLoader、chrome-net 网 络 库 ， 以 及 Web Cache, 
第 5 章 介绍 网 页 解析 ， 包 括 HTML 语 法 解析 、 网 页 处 理 一 般 过 程 、CSS 样 式 处 理 、JS 脚 本 执行 等 内 容 。 


第 6 章 介绍 排版 布局 ， 包 括 CSS 框 架 模型 、 布 局 计算 ， 以 及 Rendetr 相 关 的 核心 类 。 


第 7 章 介绍 泻 染 与 硬件 加 速 ， 包 括 坎 件 绘制 流程 、 软 件 合成 、 硬 件 加 速 合成 等 。 

第 8 章 介绍 Android WebKit 框 架 ， 包 括 Android Framework, Android WebKit Java 层 核心 类 与 主要 接口 、Android WebKit 框 架 实现 的 源码 解析 ， 并 基于 Android WebKit 的 浏览 器 做 了 范例 实现 。 
第 9 章 介绍 JavaScript 扩 展 接 口 ， 包 括 V8 原 理 及 接口 、WebKit JavaScript 接 口 ， 并 做 了 HTMLElement binding 实 例 分 析 和 HTML 5 扩展 分 析 。 

第 10 章 介绍 WebKit 的 插件 系统 ， 包 括 NPAPI 插 件 接口 详解 、WebKit 的 插件 实现 、Android 平 台 插件 开发 等 。 


第 11 章 介绍 Remote Inspector， 包 括 Remote Inspector 实 现 架构 、Remote Inspector 协 议 、Inspector 代 码 分 析 、BackEnd 代 码 分 析 、FrontEnd 代 码 分 析 等 。 


勘误 和 支持 





由 于 时 间 仓 促 加 之 笔者 水 平 及 视野 有 限 ， 错 误 和 跤 漏 是 难免 的 ， 欢 迎 读者 批评 指正 。 如 果 有 任何 宝贵 意见 ， 欢 迎 通 过 如 下 邮箱 联系 笔者 : webkitbook@163.com。 
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感谢 机 械 工业 出 版 社 华章 公司 的 策划 编辑 杨 福 川 和 丛书 主编 邓 凡 平 先生 ， 是 你 们 的 鼓励 和 帮助 引导 我 们 顺利 完成 全 部 书稿 。 
感谢 姜 影 编辑 ， 感 谢 你 对 书籍 初稿 的 订正 和 修改 建议 。 
另外 ， 还 要 感谢 曾经 的 同事 马 兴 ， 感 谢 他 对 本 书 提出 的 宝贵 意见 。 
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第 1 章 ”搭建 源 代码 编译 环境 


本 章 主要 内 容 
“ Android 全 源码 开发 环境 ; 
* Android 常 用 工具 及 相关 技巧 说 明 ; 
:WebKit 代 码 目录 结构 及 全 书 内 容 概要 ; 
. WebKit 源 代码 调试 。 


作为 全 书 的 第 1 章 ， 首 先 要 介绍 的 是 Android 系 统 以 及 WebKit 全 源码 开发 环境 的 背景 信息 。 


1.1 Android 全 源码 开发 环境 





Android 2.3 版 本 以 后 谷歌 官方 推荐 在 64 位 Linux 系 统 上 编译 其 源 代码 ， 推 荐 的 编译 平台 是 Ubuntu LTS 10.04/12.04。 


1.2 Android 常 用 工具 使 用 及 相关 技巧 说 明 








Android SDK 本 身 包含 很 多 帮助 开发 人 员 设计 、 开 发 、 测 试 和 发 布 Android 应 用 的 工具 ， 本 节 将 讨论 最 常用 的 工具 。 
“开发 利器 adqt-bundle， 是 封装 Eclipse 和 adt 的 集成 开发 工具 ， 编 写 、 调 试 Android 程 序 的 Java 代 码 ， 并 集成 DDMS 。 


: SDK Manager， 该 工具 包含 很 多 重要 的 功能 ， 包 括 管理 不 同 的 Android SDK 版 本 (构建 目标 ) 。Android 的 版 本 众多 ， 并 且 API 有 些 兼容 性 问题 。 另 外 ， 该 工具 还 用 于 管理 Android 庶 拟 设备 配置 





(AVD) ， 用 来 配置 模拟 器 ， 如 图 1-1 所 示 。 
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MD X Android SDK Tools p Installed 
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[] 9 SIK Platforn 13 1 M Installed 
DI Sswies for SIK 13 1 Installed 
i D Google APIs by Google Inr. 13 4 Not installed 
m Android 3.1 (API 12) 
& [Ji Android 3.0 (API 11) 
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Tone loading packages. 


图 1-1 SDK Manager 


“ adb (Android Debug Bridge) 是 Android 提 供 的 一 个 通用 的 调试 工具 。 借 助 这 个 工具 ， 我 们 可 以 管理 设备 或 手机 模拟 器 的 状态 ， 快 速 更 新 设备 或 手机 模拟 器 中 的 代码 ， 如 应 用 或 Android 系 统 升级 ， 在 设 
备 上 运行 shell 命 令 ， 管 理 设备 或 手机 模拟 器 上 的 预定 端口 ， 在 设备 或 手机 模拟 器 上 复制 或 粘贴 文件 等 。 


: DDMS 的 全 称 是 Dalvik Debug Monitor Service， 它 提供 多 种 调试 分 析 手 段 ， 如 测试 设备 截屏 、logcat 输 出 、 模 拟 电 话 呼叫 、SMS、 生 成 虚拟 地 理 坐 标 、 查 看 特定 进程 的 线程 以 及 堆 信息 等 。 如 图 1-2 所 示 。 
* Android 的 模拟 器 ， 可 以 模拟 不 同 的 设备 ， 用 来 运行 程序 ， 查 看 运行 结果 ， 测 试 Android 应 用 的 运行 。 如 图 1-3 所 示 。 


:logcat 是 Android 中 的 一 个 命令 行 工 具 ， 可 以 用 于 得 到 程序 的 log 信 息 。Android 日 志 系统 提供 了 记录 和 查看 系统 调试 信息 的 功能 。 日 志 都 是 从 各 种 软件 和 一 些 系 统 的 缓冲 区 中 记录 下 来 的 ， 缓 冲 区 可 以 通 
过 logcat 命 令 来 查看 和 使 用 。 





Jc wp B 18 dJQ15.4-|9i 9 6o» 3 /foous $5 Debug” 
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system process 64 201 vmwait 7 HeapWorker 
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图 1-2 DDMS 





图 1-3” Android 模拟 器 


* Hierarchy Viewer Ki Android SDK 发 布 的 工具 ， 位 置 在 tools 文 件 夹 下 ， 名 为 hierarchyviewer'bat， 如 图 1-4 所 示 。 它 是 Android 自 带 的 非常 有 用 而 且 使 用 简单 的 工具 ， 可 以 帮助 我 们 更 好 地 检视 和 设计 用 户 界 
H (UI) ， 绝 对 是 UI 检 视 的 利器 。 具 体 来 说 主要 功能 有 两 个 : 


“ 从 可 视 化 的 角度 直观 地 获得 UI 布 局 设计 结构 和 各 种 属性 的 信息 ， 帮 助 我 们 优化 布局 设计 ; 


结合 debug， 观 察 特定 的 UI 对 象 进行 invalidate 和 requestLayout 等 操作 的 过 程 。 


] ®© Hierarchy Viewer e 


File Tree View 
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图 1-4 Hierarchy Viewer 
- 九宫 格 绘画 工具 (draw9patch.bat) ， 如 图 1-5 所 示 ， 可 以 很 容易 
r 
[dj Droa -prid 


Fils 
Prez: Soft to eram prosiz 


Ton bad petiheas 





图 1-5 九宫 格 绘图 工具 


* Monkey Test Tools 包 括 Monkey exerciser tool 和 monkeyrunner 工 具 ， 主 要 用 于 程序 的 自动 化 测试 。 


- ProGuard 是 一 个 免费 的 Java 类 文件 的 压缩 、 优 化 、 混 清 器 


昆 淆 器 。 它 删除 没有 用 的 类 、 字 段 、 方 法 与 属性 ， 使 字 节 
Proguard 集 成 在 一 起 了 。 


FTPA 


13 WebKit 源 代码 目录 结构 


WebKit 源 代码 在 Android 全 源码 的 external/webkit/Source 



































录 下 。 主 要 关注 如 下 4 个 目录 : 











(1) JavaScriptCore 








WebKit 的 默认 JavasScript 解 析 引 警 ， 也 是 Safari 使 
分 代码 。 














的 JavaScript 解 析 引 擎 。 在 Android 平 台 已 经 启 





用 V8 作 为 JS 引擎，Android 4.0 以 


地 通过 一 个 所 见 即 所 得 (WYSIWYG) 的 编辑 器 来 创建 一 个 九宫 格 NinePatch 图 。 





吗 最 大 程度 地 优化 ， 使 用 简短 且 无 意义 的 名 字 来 重 命名 类 、 字 段 和 方法 。Eclipse 已 经 把 

















后 只 
(2) WebCore 


WebCore 是 浏览 器 泻 染 引 擎 的 3 








FE 体 代码 ， 包 括 Loader、DOM、Page、CSS、Render 以 及 HTML 54 











展 接口 等 相关 代码 。 





(3) Webkit 














定义 了 与 浏览 器 应 用 相关 的 一 些 接口 








， 它 是 平台 相关 的 ， 每 个 子 目 录 都 对 应 平台 的 实现 。 
(4) WebKit 2 





WebKit 2 定义 了 浏览 器 引擎 的 多 进程 应 





用 框架 、 支 持 渲染 引擎 与 浏览 器 UI 分 别 存在 于 不 同 的 进程 。 








这 4 个 目录 下 又 有 很 多 子 目录 ， 先 来 看 WebCore 目 录 下 的 各 个 





EE FE. 











1.WebCoreEl3& 











* WebCore/rendering: 存放 页 面 泻 染 相关 代码 ， 包 括 页 面 泻 染 所 涉及 的 样式 、 布 局 以 及 Render 对 象 等 内 容 。 


- WebCore/dom/: DOM 对 象 定义 的 相关 文件 ， 包 括 一 些 基础 类 及 其 接口 定义 ， 如 各 种 DOM 元 素 、 事 件 的 定义 以 及 描述 JS binding 的 idl 文 件 等 。 








到 了 JavaScriptCore 中 的 WTF (Web Template Library) 部 


- WebCore/html/: HTML 相 关 的 内 容 ， 如 HTML 解析 (Parser) 、 各 种 HTML 元 素 的 定义 、Web Canvas 实 现 等 内 容 。 
* WebCore/accessibility: 各 种 图 形 控件 的 可 用 性 访问 接口 ， 控 件 的 可 用 性 属性 包括 功能 、 角 色 、 当 前 状态 以 及 与 具体 平台 (Windows、Qt、Gtk、Mac) 的 图 形 库 的 绑 定 情况 。 


: WebCore/bindings: 包含 生成 DOM 元 素 JS 绑 定 的 接口 和 辅助 脚本 。 针 对 每 一 种 JS 引擎 都 有 对 应 的 绑 定 脚本 和 代码 目录 ， 比 如 V8 绑 定 脚本 在 sctipt/CodeGeneratorV8.pm， 而 V8 目 录 存 放 了 V8 与 DOM 元 素 
绑 定 的 接口 ， 以 及 部 分 不 能 通过 脚本 生成 的 定制 化 代码 。 


* WebCore/bridge: 提供 了 C、Java、JavaScript、Objective-C 以 及 Qt 的 NP API 的 访问 接口 。 

* WebCore/CSS: 包含 处 理 CSS 的 代码 ， 包 括 CSS 解 析 (CSSParser) 、CSS 解 析 的 输出 表示 、 不 同 CSS 规 则 的 定义 与 实现 ， 以 及 CSS 中 实现 的 JS 接口 等 内 容 。 
* WebCore/editing: 页 面 编辑 相关 的 代码 ， 比 如 编辑 修改 DOM， 修 改 显示 样式 ， 拼 写 检 查 等 功能 。 

- WebCore/history: 包含 页 面前 进 、 后 退 、 浏 览 记 录 实 现 ， 以 及 Page Cache 实 现 等 。 


* WebCore/icu: WebKit 使 用 icu4c 做 字符 编码 转换 比如 由 gbk 转 化 到 utf8。icu 目 录 包 含 相关 头 文件 。ICU 是 International Components for Unicode 的 缩写 ， 主 要 为 Java 提 供 全 球 化 支持 。 而 icu4c 则 是 C/C++ 使 用 
的 版 本 。 


* WebCore/inspector: Web Inspector 也 就 是 Safari 和 Chrome 提 供 的 网 页 调试 工具 。Inspector 目 录 包 括 Inspector 实 现 的 功能 代码 和 展示 Inspectotr 窗 口 的 前 端 代码 。 
* WebCore/loader: 包括 浏览 器 中 负责 主 资源 和 派生 资源 加 载 的 代码 、 派 生 资源 使 用 的 Memory Cache 以 及 新 的 HTML 5 接口 一 一 Application Cache 等 。 
* WebCore/mathml: 包含 W3C (万 维 网 联盟 ) 为 网 页 中 的 数学 表达 式 制定 的 规范 的 实现 代码 ， 可 以 通过 编译 选项 控制 是 否 支 持 该 功能 。 


* WebCore/notifications: 新 的 HTML 5 notification 接 口 以 及 完成 ]S 绑 定 的 idl 文 件 ， 与 其 他 HTML 5 接口 (FileAPI、WebAudio、Application Cache. Index DB, Web Socket 等 ) 一 样 ， 只 包含 接口 逻辑 ， 不 包 
含 平台 适 配 代码 。 


' WebCore/page: 包括 页 面 结构 、 页 面 操 作 、 交 互 事件 、 浏 览 器 设置 、JS 执 行 环境 等 方面 的 内 容 。 内 容 比较 散乱 ， 但 都 要 非常 重要 。 


. WebCore/platform: 主要 封装 平台 相关 的 系统 接口 ， 如 事件 处 理 、 网 络 库 接口 等 ， 如 graphics (绘制 相关 的 接口 ) 、network (HTTP 协 议 相 关 的 接口 ) 、image-deloders (图 形 库存 的 图 片 解析 接口 ) 、 
text (文本 编码 接口 ) 等 。 


* WebCore/plugins: 包含 浏览 器 为 支持 NPPlugin 而 提供 的 接口 。 
* WebCore/resources: 需要 用 到 的 资源 和 图 标 ， 主 要 是 一 些 图 片 文 件 。 

* WebCore/storage: WebStorage. Index DB 等 接口 的 实现 逻辑 ， 也 是 HTML 5 的 新 的 API。 
' WebCore/svg: 主要 包括 与 svg 方面 相关 的 内 容 ， 提 供 矢量 图 形 功能 支持 。 

* WebCore/websockets: web socket 的 接口 还 辑 代码 以 及 实现 ]JS 绑 定 接口 用 的 idl 文 件 。 
WebCore/wml: Wireless Markup Language 的 相关 代码 。 


* WebCore/workers: 包含 Web Worket 的 实现 逻辑 ， 如 Worker 线 程 封装 、]JS 执 行 上 下 文 创建 、 消 息 传 递 等 功能 代码 。Web Workers 为 网 页 前 端 提 供 多 线程 的 ]JS 执 行 环境 ，Web Worker 出 现 之 前 只 有 主线 程 可 
以 作为 JS 的 执行 环境 。 


“ WebCore/xml: 主要 包括 与 XML 方面 相关 的 内 容 ， 如 XML Parse、Xpath、XSLT 等 。 
2.WebKit 目 录 
WebKit 目 录 ， 我 们 主要 看 看 Android 平 台 相 关 的 内 容 。 
* WebKit/android: WebKit 在 Android 平 台 porting 的 实现 。 


* WebKit/android/jni: 提供 本 地 Java 类 接口 以 实现 WebKit 内 部 与 外 部 ( 即 JVM) 的 交互 ， 并 通过 JNI 中 的 Bridge 类 来 支持 协调 处 理 。 其 中 ，WebViewCore.cpp 实 现 了 android.webkit.WebViewCore.java 中 的 很 多 


native 方 法 。 
* WebKit/android/nav: 同 WebKit/android/jni， 其 中 WebView.cpp 对 应 android.webkit.WebViewClassic.java， 实 现 WebViewClassic.java 中 的 native 方 法 。 


* WebKit/android/WebCoreSupport: 实现 Android 系 统 中 外 部 程序 提供 给 WebKit 内 部 使 用 的 接口 ， 比 如 WebKit 与 网 络 库 Chromium-Net 交 互 的 接口 。 
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Android 平 台 WebKit 的 调试 分 析 的 常用 手段 包括 打印 log、remote gdb 调 试 以 及 分 析 crash dump 等 ， 下 面 分 别 介绍 。 














(1) 打印 log， 将 系统 的 运行 信息 输出 到 log 系 统 


WebkKit 代 码 量 较 大 ， 很 多 逻辑 非常 复杂 ， 单 纯 的 断 点 调试 ， 很 难 直 观看 到 想 要 观察 的 数据 。 一 方面 对 于 一 些 嵌 套 非常 强 的 逻辑 ， 如 递归 等 ， 使 用 断 点 调试 很 难 直观 看 到 相互 关系 。WebkKit 中 一 个 典型 
的 递归 应 用 就 是 对 Render 树 等 树 形 结构 的 遍历 ， 如 果 我 们 要 打印 出 一 棵 Render 树 的 各 个 节点 ， 要 直观 地 看 到 其 结构 ， 就 需要 使 用 og。 另 一 方面 WebKit 中 很 多 对 象 巨 大 ， 变 量 隐藏 很 深 ， 可 能 有 多 个 基 类 
包含 多 次 继承 ， 并 且 还 有 智能 指针 的 包 庄 ， 使 得 使 用 动态 调试 观看 非常 麻烦 ， 所 以 传统 的 log 打 印 对 于 我 们 来 说 仍然 必要 。 在 Android 系 统 下 ， 打 印 log 函 数 是 _android_log_print， 其 输出 的 log 通 过 adb 
logcat 查 看 。 一 般 使 用 定义 宏 : 


































































































fdefine LOGD (http ://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text/...) _ android log print(ANDROID LOG DEBUG,LOG, VA ARGS _ 

faetine loi http ://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text/...) ^ android log print(ANDROID LOG INFO,LOG, VA ARGS ) 

fefine LGN thttp 1//www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text/...) _ android log print(ANDROID LOG WARN,LOG, VA ARGS ) 

Fere os Qin ://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text/...) _ android log print(ANDROID LOG ERROR,LOG, VA ARGS _ 
A LLOGEÀ 

















在 使 用 _android log_print 前 ， 先 要 在 WebKit 的 Android.mk 中 加 上 liblog.so 库 的 连接 依赖 ， 具 体 如 下 : 














LOCAL LDLIBS4- -L$ (SYSROOT) /usr/lib -llog 





(2) 通过 ndk-stack 查 看 webkit native crash 时 导出 的 栈 信息 


当 程 序 骨 溃 时 ， 需 要 知道 crash 发 生 在 哪里 ，crash 时 函数 的 调 

















日 志文 件 。 将 crash 时 产生 的 stack dump 信 息 保存 在 crash.txt 中 ， 通 过 如 下 命令 查看 crash 时 栈 的 dump 信 息 : 


ndk-stack -sym $SYMBOL SO PATH -dump crash.txt 


栈 细 节 等 信息 。Android 程 序 崩 演 时 ， 会 通过 log 系 统 输 出 crash 时 的 寄存 器 和 栈 信 息 ， 部 分 机 器 会 在 /data/tombstones 目 录 产 生 crash 





SYMBOL SO_PATH 是 符号 库 目 录 ， 在 Android 源 码 中 是 out/target/product/xx/symbol/system/lib。 


Qs XT Android crash dump 产 生 的 原理 可 参考 3.3 节 。 





(3) 通过 remote gdb 直 接 动态 调试 运行 中 的 浏览 器 

















如 果 需 要 断 点 调试 ， 单 步 跟 踪 ， 查 看 线程 栈 ， 此 时 就 要 使 





























码 的 prebuilt 目 录 下 找到 ， 也 可 以 从 NDK 中 获取 ) ， 赋 予 其 可 执行 权限 。 在 shell 中 启动 设备 上 的 gdbserver 并 attach 到 browser 线 程 : 


gdb。Android 源 码 本 身 提供 脚本 gdbclient 连 接 设 备 上 的 gdbserver。 将 gdbserver push 目 标 设备 的 特定 目录 (gdbserver 可 在 Android 源 代 





$adb shell ps |grep com.android.browser # 找 到 浏览 器 进程 pid, 需要 先 启动 浏览 器 
$adb shell gdbserver :5039 --attach PID 















































其 中 5039 为 端口 号 ， 也 可 以 自 定义 为 其 他 端 


$sudo adb forward tcp:5039 tcp:5039 

















。 在 另 一 个 shell 中 启动 端口 映射 : 





启动 gdbclient: 





arm-eabi-gdb out/target/product/xx/symbols/system/bin/app process 





看 到 gdb 的 命令 提示 符 “(gdb)” 后 ， 输 入 如 下 命令 以 载 入 符号 库 : 





set solib-absolute-prefix out/target/product/xx/symbols/system/lib/ 
set solib-search-path out/target/product/xx/symbols/system/lib/ 


target remote:5039 

















等 到 各 个 lib 加 载 完毕 ， 就 能 看 到 gdb 顺 利 启动 起 来 ， 并 再 次 显示 命令 提示 符 (gdb) 。 此 后 可 以 根据 需要 输入 相应 命令 ， 比 如 设置 断 点 : 








b FrameLoaderClientAndroid.cpp:868 





执行 c， 访 问 一 个 网 址 ， 就 可 以 看 到 gdb 断 点 了 。 此 后 就 是 我 们 熟悉 的 gdb 命 令 了 。 
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本 章 介绍 了 Android 开 发 环境 的 搭建 ，Android 源 代码 获取 以 及 编译 方法 ， 并 对 Android 附 带 常用 工 























析 WebKit 代 码 的 方法 。 本 章 旨 在 介绍 承载 WebKit 的 Android 源 码 环境 ， 熟 悉 该 部 分 是 开发 Android 平 台 WebKit 的 基础 。 


本 章 主要 内 容 





“ 简 述 浏览 器 的 工作 原理 


“ 介绍 浏览 器 内 核发 展 史 


' 概述 WebKit 架 构 


第 1 章 为 读者 说 明了 Android 源 码 的 编译 环境 本 书 内 容 概要 ， 在 本 章 中 将 阐述 万 维 网 技术 的 基本 概念 


状 ， 最 后 着 重 描述 WebKit 内 核 的 架构 流程 和 设计 思想 。 





n 


2.4 浏览 器 工作 原理 概述 


众所周知 ， 万 维 网 (World Wide Web, WWW) 以 统一 资 


答 ， 以 超 文本 标记 语言 (HyperText Markup Language, HTML) 记录 并 以 超 链 接 (hyperlink) 互相 关联 起 来 的 网 页 (web page) 文档 作为 内 容重 

















览 器 (browser application) 即 是 专门 











来 访问 和 浏览 万 维 网 页 


第 2 章 ”浏览 器 工作 原理 及 WebKit 概 览 


原 定位 符 (Uniform Resource Locator, URL) 作为 地 址 空间 编码 ， 以 超 文本 传送 协 


的 使 用 作 了 说 明 ， 然 后 详细 介绍 了 WebKit 代 码 的 目录 结构 以 及 本 书 内 容 概要 ， 最 后 讲述 了 调试 分 




















浏览 器 的 主要 工作 原理 ， 并 简单 介绍 和 对 比 主流 的 全 功能 浏览 器 内 核 以 及 WebKit 项 目的 历史 和 现 


议 (HyperText Transfer Protocol，HTTP) 请 求 和 应 





















































的 客户 端 软件 ， 也 是 现代 计算 机 系统 中 应 用 最 为 广泛 的 软件 之 一 ， 其 重要 性 不 言 而 喻 。 浏 览 器 内 部 最 主要 也 是 最 重要 的 模块 是 负责 页 面 泻 


元 ， 构 成 了 人 类 有 史 以 来 最 为 庞大 的 资料 信息 库 。 浏 
































余 的 部 分 可 统称 为 浏览 器 的 外 壳 (browser shell) 。 





染 的 排版 引擎 (layout engine) ， 也 可 称 作 浏 览 器 的 内 核 (kernel) , 











下 面 将 从 页 面 、 排 版 引擎 和 浏览 器 外 壳 应 用 三 个 方面 对 万 维 网 和 浏览 器 技术 的 基本 概念 和 原理 逐一 地 做 简单 介绍 。 











2.2 浏览 器 和 WebKit 简 史 





和 HTML 标 准 相伴 至 今 ， 浏 览 器 从 无 到 有 ， 从 简单 到 复杂 ， 经 历 了 许多 变化 ， 内 容 越发 丰富 ， 功 能 日 益 强 大 。 


























第 一 个 浏览 器 也 是 由 World Wide Web 发 明 人 Tim Berners-Lee 于 1990 年 发 明 ， 恰 好 最 开始 它 的 名 字 就 叫 World Wide Web， 后 来 为 避免 浏览 器 软件 与 万 维 网 技术 重 名 而 改称 Nexus。 第 一 个 易于 使 
并 大 规模 流行 的 浏览 器 是 Marc Andreesen 于 1993 年 发 明 的 Mosaic， 他 又 成 立 了 网 景 公司 ， 在 1994 年 推出 了 赫赫 有 名 的 Netscape Navigator 浏 览 器 。 微 软 在 互联 网 争夺 战 中 后 发 制 人 ， 在 Internet 
Explorer 浏 览 器 免费 绑 定 进 Windows 95 系 统 ， 最 终 赢得 了 第 一 次 浏览 器 世界 大 战 。 至 2000 年 初 ， 因 Windows 98、Windows XP 和 IE 5.0、6.0 等 一 系列 产品 的 成 功 发 布 ， 微 软 在 浏览 器 市 场 份额 上 的 垄断 地 
位 业已 形成 。 























cr 


























1998 年 ， 网 景 公司 成 立 了 Mozilla 组 织 ， 正 式 将 其 浏览 器 代码 开源 ， 成 为 Open Source 和 浏览 器 发 展 史上 又 一 重要 里 程 碑 。Mozilla 几 经 磨炼 ， 于 2004 年 又 成 功 推出 了 拥有 多 标签 浏览 、Add-On 扩 展 等 
特色 功能 的 Firefox 浏 览 器 ， 一 时 风 摩 世界 ， 从 IE 手中 又 夺回 了 不 少 市 场 份额 ， 拉 开 了 第 二 次 浏览 器 世界 大 战 的 序幕 。 





























2003 年 以 后 ， 随 着 苹果 公司 的 王者 归来 和 Google 的 快速 崛起 ， 浏 览 器 和 整个 IT 界 都 发 生 了 深刻 而 不 可 逆转 的 变化 。 苹 果 公司 Mac OS 和 iOS 操 作 系 统 开发 的 Safari 浏 览 器 最 终 借鉴 采纳 了 KDE 桌 面 
KHTML 排 版 引擎 ， 并 组 织 成 立 了 WebkKit 开 源 项 目 和 基金 会 ， 强 有 力 地 推动 了 浏览 器 排版 引擎 的 发 展 。 靠 搜索 引擎 起 家 的 互联 网 世界 霸主 Google 在 2008 年 也 终于 把 触角 伸 向 了 Web 客 户 端 ， 重 磅 发 布 了 基 
于 WebKit 引 警 开 发 的 Chrome 浏 览 器 。 自 此 浏览 器 战场 上 群雄 纷 起 、 金 花 齐 放 ， 各 自 赁 依 操作 系统 平台 ， 形 成 了 一 定 的 战略 均衡 态势 。 



















































































当前 全 球 范围 内 使 用 最 广 的 浏览 器 有 Google Chrome, Mozilla Firefox, Internet Explorer、Opera 和 Safari， 其 中 Firefox、Safari 和 Chrome 这 三 大 开源 引擎 浏览 器 总 共 占 据 了 超过 50% 的 市 场 份 
额 。 除 了 这 些 支 持 完整 W3C HTML 标 准 的 全 功能 浏览 器 之 外 ， 还 有 在 Linux 等 系统 中 被 小 范围 使 用 的 命令 行文 字 界面 浏览 器 ， 如 Lynx、Links、W3m 等 。 图 2-13 用 时 间 轴 的 形式 展示 了 部 分 主流 浏览 器 的 发 
展 史 。 



























































早期 浏览 器 的 排版 引擎 并 未 被 设计 成 独立 模块 ， 而 是 与 浏览 器 的 其 他 部 分 代码 紧 耦 合成 一 个 整体 。Meozilla 将 其 排版 引 警 Gecko 作为 标准 模块 单独 发 布 后 得 到 了 广泛 使 用 ， 诸 多 浏览 器 开发 商 如 
Maxthon、Flock、Lunascape 等 开始 采用 Gecko 引 警 作 为 浏览 内 核 ， 并 且 一 些 非 浏览 器 应 用 如 Mozilla Thunderbird 也 基于 其 开发 。 目 前 功能 完备 的 排版 引擎 分 别 是 : Trident (应 用 于 Internet 
Explorer) 、Gecko (应 用 于 Mozilla Firefox) 、Presto (应 用 于 Opera， 计 划 被 WebKit 蔡 代 ) 、WebKit (应 用 于 Apple Safari 和 Google Chrome) 。 
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图 2-13 浏览 器 timeline 


简 述 完 浏览 器 的 众 家 族 史 之 后 ， 我 们 来 看 看 本 书 主角 WebKit 的 前 世 今生 。 

















WebKit 是 一 个 开源 的 浏览 器 排版 引擎 ， 官 方 网 址 是 http://www.webkit.org， 其 起 源 最 早 可 追溯 到 始 于 1998 年 的 KDE 开 源 桌面 环境 项 目的 HTML Widget， 作 者 为 Torben Weis 和 Martin Jones, AX 
进一步 发 展 为 KDE 的 标准 组 件 、KHTML 排 版 引擎 和 KJS Javascript 脚 本 引擎 。 苹 果 公司 为 开发 自主 的 Safari 济 览 器 ， 在 对 比 了 Gecko 和 KHTML 之 后 ， 裔 然 选 择 了 后 者 。 原 因 是 相 比 Gecko 的 庞大 采 

肿 ，KHTMI 更 加 轻巧 和 清晰 。 苹 果 公司 将 KHTML 更 名 为 WebCore，KJS 更 名 为 JjavascriptCore， 两 者 合 起 来 作为 WebKit。 为 了 平息 与 KDE 社 区 的 纷争 ， 吸 引 更 多 的 开发 者 和 开源 社区 的 力量 ， 苹 果 公司 成 
立 了 WebKit 开 源 项 目 。 




































































一 直 以 来 ，PC 浏 览 器 基本 上 是 IE 和 Meozilla 的 天 下 ， 排 版 引擎 非 Trident 即 Gecko， 第 三 方 采用 Opera Trident 的 情况 极 少 。1E 背 靠 Windows 的 垄断 地 位 长 期 称霸 而 不 思 进 取 ，IE 6 之 后 多 年 未 曾 更 
新 ，Mozilla Firefox 的 市 场 份额 则 增 至 20% 左 右 后 缓 灌 不 前 。2008 年 9 月 ， 谷 歌 公 司 重 磅 推出 了 基于 WebKit 内 核 的 Chrome 浏 览 器 ， 从 此 风云 突变 ， 三 国 大 战 再 起 。 异 军 突起 的 搅局 者 Chrome 促 成 了 浏览 
器 技术 的 持续 发 展 ， 时 至 今日 已 是 天 下 三 分 。WebKit 也 因此 逐渐 转 入 更 多 开发 者 的 视界 ， 影 响 力 和 知名 度 与 日 俱 增 。 















































自 2007 年 苹果 公司 发 布 iPhone 以 来 ， 智 能 手机 和 移动 互联 网 领域 产生 了 革命 性 的 爆发 式 增长 ，WebKit 也 随 之 迎 来 了 又 一 个 腾飞 的 新 契机 。 在 两 大 主流 移动 智能 操作 系统 iOS 和 Android 上 ， 默 认 的 浏览 
器 内 核 都 是 WebKit， 而 且 分 别 以 Framework 的 方式 推出 了 UIWebKit 和 WebView 组 件 ， 使 得 第 三 方 开发 者 可 以 据 此 构建 自己 的 浏览 器 或 使 用 Web 技 术 展现 内 容 的 各 种 复杂 应 用 。iOS 和 Android 双 峰 对 峙 ， 
在 确立 了 移动 生态 系统 牢 不 可 破 的 垄断 地 位 ， 伴 随 而 来 的 结果 就 是 移动 平台 上 的 浏览 内 核 基本 上 全 是 WebKit。 













































































当前 WebkKit 在 各 操作 系统 平台 上 总 的 市 场 份额 高 达 40%， 大 幅 超越 Trident 和 Gecko 位 居 第 一 。 老 牌 的 Opera 浏 览 器 已 经 痛 下 决心 当机立断 ， 宣 布 在 下 一 个 版 本 中 抛弃 自主 的 Presto 引 擎 ， 转 而 采用 
WebKit 作 为 内 核 。 



































主流 排版 引擎 都 经 历 过 长 达 十 几 年 的 发 展 ，WebKit 在 其 中 只 能 算 作 一 个 后 起 的 新 兴 之 秀 ， 但 无 论 功能 、 性 能 、 成 熟 度 、 兼 容 性 还 是 市 场 份额 ，WebKit 都 完全 不 输 于 那些 老牌 产品 ， 甚 至 有 很 多 方面 明 
显 胜出 。 从 表 2-1 对 主流 排版 引擎 在 HTML 5、JS 性 能 、CSS3 等 多 方面 的 评测 中 可 以 看 出 ，WebkKit 引 擎 十 分 优秀 ,拥有 强大 的 竞争 力 和 吸引 力 。 





























表 2-1 排版 引擎 对 比 评测 












































排版 引擎 | 最 新 版 本 市 场 份额 Acid3 SunSpider | V8Bench | WebGL | HTML$5 | CSS3 
WebKit 168219 >50% 97-100/100 478 = 6000 支持 505 5796 
Gecko 30.0 Beta 约 18% 94-97/100 492 »3000 支持 467 5496 
Trident 7.0 约 25% 55-95/100 | NotRun = 1500 部 分 支持 376 51% 
Presto 2.12.388 停止 支持 97/100 738 <4000 支持 496 5396 

Qum Performance 和 Feature 结 果 既 依赖 于 排版 引擎 也 依赖 于 浏览 器 外 过 ， 而 这 两 者 的 版 本 都 是 不 断 升 级 更 新 的 。 因 此 表 2-1 的 对 比 评测 只 能 作为 参考 结果 ， 和 迅猛 发 展 的 各 浏览 器 实际 表现 会 有 一 定 


出 入 ， 更 多 详细 的 最 新 测试 结果 可 从 Acid3、CSS3Test、HTML5Test、PeaceKeeper、Karen、Dromaeo 等 专业 测试 网 站 和 其 他 科技 网 站 上 看 到 。 总 的 来 说 ， 以 WebKit/Blink 为 内 核 的 Chrome 浏 览 器 在 诸多 性 能 评 


测 中 基本 上 会 党 括 各 项 冠军 ， 同 时 其 他 浏览 器 尾随 其 后 也 在 不 断 努 力 追 赶 。 























从 最 初 的 弱小 嫩 苗 到 今日 的 苦 天 大 树 ，WebKit 已 经 走 过 了 近 15 年 的 历史 。 回 顾 其 迅猛 的 发 展 历程 和 如 今日 益 普及 的 现状 ， 展 望 未 来 ， 我 们 完全 有 理由 相信 ，WebKit/Blink 最 终 将 成 为 排版 引擎 中 的 
UnixwLinux， 被 业界 当 作 事 实 上 的 标准 实现 。 至 少 在 开源 引擎 中 ，Presto 已 将 星 陨落 ， 仪 存 的 硕果 况 品 Gecko 发 展 前 景 和 势头 已 经 明显 不 如 WebKit， 试 问 尚 有 谁 再 可 与 之 争锋 呢 ? 




















2.3 WebKit 架 构 概览 


我 们 从 浏览 器 的 发 展 历程 和 现状 分 析 中 可 以 看 出 ，WebKit 是 一 个 功能 完备 、 性 能 优良 、 相 对 轻巧 、 使 用 广泛 的 排版 内 核 ， 是 诸多 操作 系统 上 开发 浏览 器 的 不 二 之 选 。 本 书 集 中 论述 Android 4.2 平 台 上 
的 WebKit 移 植 版 本 ， 本 节 将 从 组 成 架构 、 工 作 流程 和 设计 风格 三 个 方面 对 Android WebkKit 做 初步 介绍 ， 为 读者 简单 梳理 其 庞大 代码 的 整体 样 狐 ， 也 是 对 后 续 章 节 的 引导 




















24 本章 小 结 

















本 章 的 目的 是 希望 读者 能 获得 对 WebKit 组 成 架构 和 浏览 器 工作 原理 的 一 个 整体 理解 和 认识 ， 并 概括 出 其 中 的 一 些 关 键 点 (主要 对 象 ) 和 线 (核心 流程 ) ， 方 便 读 者 自主 进行 源码 分 析 。 








形 绘制 、 硬 件 加 速 以 及 网 络 、 多 线程 等 多 方面 的 算法 和 技术 ， 期 望 在 一 章 篇 幅 内 能 够 完整 叙述 清楚 








由 于 WebKit 是 一 个 相当 庞大 复杂 的 软件 系统 ， 代 码 行 数 在 百 万 数量 级 ， 涉 及 语法 解析 、 排 版 布局 、 
是 不 太 现 实 的 。 
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算法 原理 和 具体 代码 实现 。 














在 余下 的 章节 中 ， 我 们 将 分 别 对 WebKit 各 主要 功能 模块 抽 丝 破 茧 ， 更 加 深入 细致 地 介绍 


第 3 章 ” WTF 的 实现 及 使 用 





本 章 主要 内 容 
- 分析 OwnPtr 和 RefPtr 的 实现 及 使 用 
: 分 析 Assert 与 Android crash dump 
“ 分 析 WTF 内 存 管理 及 容器 类 
“分析 原子 操作 


介绍 Android WebKit 的 运行 结构 











第 2 章 对 WebKit 的 整体 结构 做 了 介绍 ， 从 宏观 上 勾画 出 了 WebKit 的 轮廓 ， 使 读者 据 此 对 WebKit 有 了 整体 的 了 解 。 从 本 章 起 读者 将 与 笔者 一 道 拿 起 “手术 刀 ”， 精 确 剖 析 WebKit 的 实现 细节 ， 对 
WebKit 建 立 起 具体 的 认识 。 对 于 WebKit 的 分 析 ， 起 点 一 定 是 其 C++ 基础 库 一 一 WTF 库 。 












































3.1 ”WTF 库 概述 


存 管理 手段 。 在 WebCore 代 码 中 几 了 
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WTF 全 称 Web Template Li 


ibrary， 是 非常 杰出 的 代码 库 。 作 为 WebKit 的 主要 基础 库 ， 它 优雅 地 实现 了 smart ptr、string、container， 提 供 了 跨 平 台 的 原子 操作 、 时 间 封 装 、 线 程 封装 ， 以 及 高 效 的 内 























本 章 挑 选 了 WTF 中 最 常 








智能 指针 


智能 指针 (smart ptr) 泛 指 一 类 原生 指针 的 封装 ， 它 的 行为 非常 类 似 3 














、 取 蜂 




















的 基础 C++ 工 














计数 、autoLocker、lazy evaluation 等 。 


看 不 到 STL 的 身影 ， 取 而 代 之 的 就 是 WTF 库 代码 (当然 WTF 本 身 的 实现 以 及 porting 


类 来 分 析 ， 包 括 智能 指针 类 (OwnPtr 和 RefPtr) 、 断 言 
的 Android 平 台 crash dump， 以 及 WebKit 运 行 时 结构 等 ， 透 过 实现 分 析 可 以 明了 

















原生 指针 。 通 过 它 ，C+ + 程序 可 以 























其 原理 及 使 用 。 





、 原 子 操作 、 内 存 管理 、 常 用 容器 、 线 程 封 装 等 。 在 分 析 这 些 工 


到 了 STL) ， 可 以 说 WTF 是 学 习 WebKit 代 码 的 “钥匙 ”。 




















的 同时 还 将 介绍 与 之 关联 





自动 化 地 实现 资源 管理 (比如 对 象 的 自动 析 构 ) 以 及 很 多 包 豪 指 针 的 衍生 操作 ， 如 内 容 拷贝 、 


Qua smart ptr 使 用 广泛 ， 有 众多 的 原型 及 功能 ， 几 乎 在 所 有 的 大 型 工程 中 都 可 以 看 到 它们 的 身影 ， 本 章 由 于 篇 幅 及 目标 定位 所 限 ， 不 能 一 一 列举 ， 有 兴趣 的 读者 可 以 参考 STL、boost、android、 
chromium-base 等 开源 代码 。 


smart ptr 可 以 实现 多 种 行为 ， 其 经 典 应 























是 实现 动态 分 配对 象 的 内 存 自动 加 








ur. ME 





























介绍 smart ptr 的 工作 原理 。 


“ 在 C++ 语言 中 ，smatt ptt 对 象 作为 栈 上 分 配 的 (stack-allocated) 自动 变量 (对象) 存在 ， 在 代码 执行 上 下 文 退 出 其 作用 域 时 被 自动 析 构 (自动 析 构 由 编译 器 插 桩 的 析 构 函数 调用 以 及 ABI 中 规定 的 退 栈 


操作 联合 实现 ) 


- smart ptt 的 析 构 函数 中 一 般 包含 被 引用 对 象 的 delete 操 作 ， 从 而 间接 实现 了 被 引用 对 象 的 自动 析 构 。 













































































smart ptr 自 动 回收 资源 这 一 功能 在 异常 发 生 的 情况 下 尤其 有 
被 执行 而 引起 内 存 泄露 。 对 于 使 
的 行为 正 是 实现 被 引用 对 象 的 引用 计数 及 内 存 的 自动 回收 。 

下 面 展 示 smart ptr 的 一 般 实现 结构 : 








【一 smart pointer 示 例 】 





， 异 常 发 生 处 之 后 的 代码 可 能 不 会 执行 。 对 于 某 些 不 合理 的 设计 ， 如 果 误 将 资源 区 
smart ptr 的 场景 ， 异 常 栈 展开 的 过 程 会 析 构 栈 上 分 配 的 变量 ， 当 然 也 就 包括 栈 上 分 配 的 smart ptr 对 象 ， 使 smart ptr 引 

















收 操作 (如 delete) 放置 在 此 范 上 











四 内 ， 可 能 因 delete 未 
疏 。WTF 库 中 smart ptr 
































的 资源 一 样 可 以 被 正确 回 





template <typename T> 
class SmartPtr[( 
public: 


typedef T ValueType; 


typedef ValueType *PtrType; 


/ [Ag i& MEM] ils aic 
SmartPtr () 
SmartPtr (PtrType ptr) 
^SmartPtr() 
/ [35 Wi hd 


:m ptr (NULL) 


ü 


:m ptr(ptr) {} 


(if(m ptr) delete m ptr;} 


SmartPtr (const SmartPtr«T»& o); 
template«typename U> SmartPtr(const SmartPtr«U»& o); 


/ [35 Wikis JEAE 


template«typename U> SmartPtr& operator-(const SmartPtr«U»& o); 


// 指 针 运 算 


ValueType& operator*() const ( return *m ptr; } 
PtrType operator-»() const ( return m ptr; } 


MEL ELE EEN 


bool operator! () const { return !m ptr; } 


// 转 成 Faw ptr 
operator PtrType () 


private: 


PtrType m ptr; 
H 


{ return m ptr; } 





创建 smart ptr 对 象 的 格式 如 下 : 





由 上 述 代码 可 知 : 


SmartPtr (new ValueType()); 


: 入口 参 数 一 般 是 堆 上 分 配 的 对 象 ， 当 然 这 本 质 上 取决 于 析 构 函数 的 行为 。 


: 拷贝 构造 函数 和 拷贝 典 值 运算 符 的 实现 ， 涉 及 被 引用 对 象 的 所 有 权 传 递 行为 ， 其 实现 可 以 是 将 被 引用 对 象 的 所 有 权 直 接 传递 给 新 对 象 或 者 右 值 对 象 ， 也 可 以 是 增加 被 引用 对 象 的 引用 计数 。 


© 定义 取 值 (operator*) 和 指 入 
* 定义 operatorl0 运 算 符 是 因 


“ operator PtrType( 是 裸 指 生 

















smart ptr 的 实现 和 使 

















依据 复制 和 赋值 时 行为 的 不 


3.3 Assert 与 crash dump 


Assert (断言 ) 在 C/C++ 语言 开发 的 程序 中 使 用 广 


误 发 生 时 进行 适当 的 处 理 。 


作 


由 于 WebkKit 被 设计 用 于 许多 嵌入 式 平台 ， 为 提高 

















， 只 不 过 发 生 异 常 时 (或 者 说 程序 运行 状态 错误 时 























时 需要 注意 的 细节 ， 将 会 在 3.2.1 节 和 3.2.2 节 中 进行 描述 。 























没有 异常 的 








慨 上 抛 动作 ， 也 不 像 使 














(operator->) 运 算 符 的 目的 是 使 smart pttr 在 行为 上 类 似 于 原生 指针 。 





同 ，WTF 提 供 了 OwnPtr 和 RefPtr 这 两 类 smart ptr， 本 章 将 以 Android 4.2 的 代码 为 蓝本 来 介绍 它们 的 实现 。 


setjump 和 longjump 那 样 跳 转 到 特定 的 处 理 函 数 ， 而 通 


为 C/C++ 代 码 存在 对 指针 是 否 为 空 的 简洁 判断 语句 iftlptg。 定 义 operator0 后 ，smart ptt 可 以 应 用 在 if(ISmatrPtr) 和 if(llsmartPtt) 这 样 的 场景 中 。 


转换 操作 ， 使 得 smatt ptr 在 C++ 编译 系统 提供 的 一 次 类 型 转换 的 帮助 下 能 够 用 在 需要 裸 指 针 的 地 方 ， 同 时 也 可 以 使 用 裸 指 针 的 值 来 参与 逻辑 运算 ， 比 如 if(SmartPtD o 


其 是 在 一 些 单 测 框架 (比如 gtest) 中 ， 通 过 它 C/C+ + 宏 的 强大 可 寅 一 斑 。 断 言 通常 用 来 检测 程序 的 运行 状态 和 程序 运行 的 健康 状况 ， 并 在 错 


平台 适应 性 ， 应 该 尽量 减少 对 编译 器 高 级 特性 的 依赖 ， 比 如 异常 、dynamic_cast 等 。 而 WTF 中 提供 的 一 系列 Assert 相 关 的 宏 ， 就 起 到 了 异常 检查 的 


常 只 是 触发 crash 或 debugger。 这 部 分 断言 表达 式 ， 











通过 条 件 编译 的 控制 ， 只 会 在 Debug 版 中 起 作用 ， 而 在 正式 的 Release 版 中 不 会 存在 ， 因 此 不 会 增加 代码 的 体积 。 











3.4 内 存 管理 与 容器 

















WTF 作 为 一 个 基础 库存 在 ， 它 提供 的 内 存 管理 手段 与 STL 类 似 ， 主 要 是 为 容器 和 应 用 类 提供 了 便捷 高 效 的 内 存 分 配 接 口 (当然 一 些 内 部 使 用 的 内 存 对 齐 接口 也 是 必 不 可 少 的 ) 。 其 中 ，OSAllocator 和 
PageAllocation 类 只 应 用 于 JavaScriptCore (Safari 使 用 的 JS 引擎) 中 ， 这 里 不 做 分 析 。 本 节 重 点 分 析 FastAllocator， 这 里 的 FastAllocator 是 指 封装 FastMalloc 得 到 的 WTF_ MAKE FAST ALLOCATED, 
FastNew/FastDelete 以 及 FastNewArray/FastDeleteArray。 
































35 ”原子 操作 











原子 操作 因 整 个 操作 连续 执行 完毕 不 被 打 断 而 得 名 ， 它 需要 CPU 提供 指令 级 的 支持 。 在 多 线程 运行 环境 下 有 着 非凡 的 意义 ， 有 了 原子 操作 我 们 不 必 借助 锁 来 实现 原子 上 下 文 ， 大 大 减 小 小 系统 开销 ， 进 
而 可 以 实现 免 锁 引用 计数 、 用 户 态 spinloc， 以 及 高 性 能 免 锁 算法 等 ， 比 如 著名 的 无 锁 队 列 MS-queue 就 是 基于 原子 的 比较 交换 指令 来 实现 的 。 












































WTF 中 提供 的 原子 操作 主要 是 原子 的 自 增 和 自 减 操作 ， 于 实现 计数 增 减 ， 在 Android 平 台 下 的 实现 如 下 : 

















[一 Atomics.h] 


inline int atomicIncrement (int volatile* addend) 
{ return android atomic inc(addeng); } 
inline int atomicDecrement (int volatile* addend) 
{ return android atomic dec(addend); } 








注意 到 其 输入 参数 都 是 int volatile*， 在 C/C++ 的 变量 定义 语 境 下 ，volatile 与 * 的 位 置 关 系 和 const 与 * 位 置 关系 完全 一 样 ， 这 里 volatile 修 饰 int 而 不 修饰 +， 所 以 其 参数 为 指向 volatile int 类 型 整数 的 指 
针 。volatile 保 证 了 对 变量 的 操作 一 定 是 直接 对 内 存 中 的 变量 本 身 的 操作 。 其 中 ，android_atomic_inc 是 Android 平 台 提供 的 函数 ， 对 于 不 同 的 硬件 平台 有 不 同 的 实现 ， 但 最 终 都 是 通过 gcc 内 联 汇 编 来 实现 
的 。 
































3.6 ”WebkKit 运 行 时 线程 结构 


Android 平 台 上 的 WTF 库 提供 了 线程 结构 的 C+ + 封装， 本 节 要 分 析 WebkKit 的 运行 时 线程 结构 、 单 个 线程 的 实现 结构 ， 以 及 WebkKit 运 行 时 多 个 线程 的 同步 及 交互 。 
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本 章 主 要 介绍 了 WTF 库 的 实现 与 使 用 ， 包 括 其 中 的 OwnPtr、RefPtr、 断 言 、 内 存 管 理 、 容 器 、 原 子 操作 等 内 容 ， 为 读者 继续 阅读 及 实际 开发 提供 支持 。 同 时 ， 还 介绍 了 Android 的 crash dump 以 及 
WebKit 的 运行 时 线程 结构 等 ， 希 望 为 读者 勾勒 出 WebKit 运 行 的 动态 画面 。 有 这 些 内 容 作为 基础 ， 读 者 就 可 以 展开 WebKit 的 神奇 画卷 。 














第 4 章 ” Loader 与 网 络 库 


本 章 主要 内 容 
' 分 析 Loadet 模 块 的 设计 及 架构 
- 分 析 MainResoutceLoadet 资 源 加 载 流 程 
- 分 析 SubResoutrceLoadet 资 源 加 载 流程 
- 介绍 WebKit 网 络 库 chrome-net 


- 介绍 浏览 器 Cache 内 容 











前 面 3 章 从 浏览 器 的 工作 原理 入 手 ， 为 读者 详细 介绍 了 WebKit 的 设计 架构 、WebKit 的 核心 基础 库 WTF 等 内 容 。 从 本 章 起 笔者 将 与 读者 一 起 剖析 WebKit 的 核心 模块 实现 细节 ， 一 层 一 层 地 揭 开 WebKit 的 
神秘 面纱 。 












































网 


片 、 











我 们 使 用 浏览 器 上 网 时 ， 首 先 会 在 地 址 栏 输入 一 个 网 址 ， 浏 览 器 会 依据 网 址 向 服务 器 发 送 资源 请 求 ， 服 务 器 解析 请 求 ， 并 将 相关 数据 资源 传送 回 给 浏览 器 ， 这 些 数 据 资源 包括 Page 的 描述 文档 、 
Javascript 脚 本 、CSs 等 。 此 后 ， 浏 览 器 引擎 会 对 数据 进行 解码 、 解 析 、 排 版 、 绘 制 等 操作 ， 最 终 呈 现 出 完整 的 页 面 。Loader 是 WebKit 的 排头 兵 ， 负 责 资源 加 载 的 工作 。 

















全 -三 "T "n E : a " - Ss M 5 ses r 
注意” Loader 部 分 对 资源 的 描述 有 几 个 不 同 的 术语 ，MainResource ( 主 资源 ) 指 页 面 的 文档 内 容 ， 而 SubResource (派生 资源 ) MÆ X 3p A ARH, deHTMLU m PARKA HI 
CSS 文 件 、JavaSctipt 文 件 等 。MainResource 和 SubResource 有 时 又 有 另外 的 名 称 : 主 链 和 外 链 。 


41 Loader 





如 图 4-1 所 示 ，Loader 在 WebKit 中 承上启下 ， 一 方面 它 作 为 网 络 模块 的 客户 ， 通 过 网 络 模块 来 加 载 资源 ， 另 一 方面 它 为 Parser 模 块 加 载 页 





























Graphics Context 





图 4-1 WebKit 执 行 流程 示意 图 














的 内 容 ， 控 制 着 WebKit 后 续 的 解析 以 及 绘制 过 程 。 




















WebKit 本 身 有 良好 的 可 移植 性 ， 第 3 章 分 析 WTF 时 已 有 所 讲解 ， 对 于 Loader 模 块 ， 它 本 身 是 平台 无 关 的 ， 只 是 传递 获取 资源 的 请 求 给 网 络 模块 ， 并 接受 网 络 模块 返回 的 资源 加 载 结果 。 


platform/network 目 录 下 的 代码 即 是 与 : 


























4.2 Loader 的 设计 与 实现 架构 


4.2.1 Loader 模 块 的 设计 














Loader 模 块 是 网 络 模块 的 客户 ， 在 主 资源 和 派生 资源 加 载 的 路 径 上 ， 最 终 都 通过 ResourceHandle 将 资源 加 载 的 请 求 转 交 给 网 络 模块 。 网 络 模块 提供 指定 资源 的 获取 和 上 传 功能 。 获 取 的 资源 可 能 来 自 
同 OS 和 HTTP 实 现 无 关 的 网 络 


到 2-17 是 描述 WebkKit Loader 部 分 原理 的 经 典 图 





























网 络 、 本 地 文件 或 者 缓存 。 对 不 同 网 络 库 的 适 配 会 在 网 络 层 完成 ， 所 以 Loader 接 触 到 的 基本 上 是 


在 地 址 栏 输入 新 地 址 或 者 在 已 经 打开 的 页 面 中 点 击 链接 ， 都 会 触发 
结构 ， 然 后 根据 需求 触发 派生 资源 的 加 载 流程 。 了 
ResourceScheduler 这 个 类 就 是 








片 ， 出 自 WebkKit 官 网 的 技术 文档 ， 它 清晰 地 展现 了 WebKit Loader 的 两 条 资源 加 载 路 径 : 3 
颇 有 不 同 ， 比 如 对 资源 加 载 失败 的 处 理 ， 主 资源 下 载 失败 会 有 报错 提示 ， 而 派生 资源 如 图 片 下 载 失 败 ， 往 往 只 显示 一 个 占 位 符 。 所 以 Loader 分 别 
它们 。 它 们 的 公共 基 类 ResourceLoader 主 要 完成 两 种 资源 加 载 都 需要 进行 的 操作 ， 如 在 资源 加 载 过 程 中 ， 








反馈 加 载 状态 的 回调 等 。 














其 直接 交互 的 网 络 模块 的 代码 ， 该 目录 包含 不 同 平台 的 网 络 适 配 ， 比 如 platform/network/android 就 是 Android 平 台 相 关 的 适 配 。 


EF 资源 加 载 路 径 和 派生 资源 加 载 路 径 。 这 两 类 资源 的 加 载 过 程 
设计 了 MainResourceLoader 和 SubResourceLoader 来 处 理 




















资源 的 加 载 流程 ， 随 着 主 资源 在 HTTP 协 议 的 传输 下 分 段 到 达 ，WebKit 的 Parser 模 块 解析 


资源 的 内 容 ， 生 成 派生 资源 对 应 的 DOM 



































主 资源 和 派生 资源 的 加 载 还 有 一 个 区 别 ， 在 Android 4.2 版 本 中 主 资源 是 没有 缓存 的 ， 而 派生 资源 是 有 缓存 机 制 的。 这 里 的 缓存 : 
码 过 的 数据 ， 通 过 Memory Cache 可 以 节省 网 络 请 求 和 图 片 解码 的 时 间 。 不 同 于 Page Cache, Page Cache 存 储 的 是 DOM 树 和 Render 树 的 数 # 





在 设计 模式 方面 ， 首 先 来 看 这 三 个 类 之 间 的 关系 : FrameLoader, FrameLoaderClient, FrameLoaderClientAndroid, 





源码 中 类 似 使 









































方法 很 多 ， 读 者 在 阅读 代码 时 ， 可 留意 相关 的 用 法 。 

















资源 的 加 载 是 立刻 发 起 的 ， 而 派生 资源 则 可 能 会 为 了 优化 网 络 ， 在 队列 中 等 待 〈 这 里 的 立刻 发 起 是 Loader 
来 管理 资源 加 载 的 调度 ， 主 要 调度 对 象 就 是 派生 资源 ， 会 根据 Host、 加 载 优 先 级 等 来 影响 资源 加 载 的 先后 顺序 。 








屋面 的 ， 不 是 网 络 层面 的 ) 。 





旨 的 是 Memory Cache， 用 于 保存 原始 数据 (比如 CSS、Js 等 ) ， 以 及 解 
居 结 构 ， 用 来 在 前 进 后 退 时 快速 显示 页 面 。 











展示 了 它们 之 间 的 关系 























， 显 然 此 处 使 用 的 是 策略 模式 。 在 WebKit 内 核 











didDispatchFirstLayout() 
frameLoaderComplet ed() 





图 4-2 ”FrameLoaderClient 的 策略 模式 








另外 ,我 们 尝试 换个 角度 去 看 FrameLoader 类 ， 对 于 FrameLoader 类 的 使 用 者 来 说 ，FrameLoader 类 封装 了 很 多 相关 类 ， 而 使 用 者 无 需 关心 FrameLoader 类 的 内 部 实现 ， 其 类 关系 图 如 图 4-3 所 示 ， 显 
然 符 合 外 观 模式 的 特征 。 














dispatchWillSendRequest() 
dispatchDidReceiveResponse() 





图 4-3 FrameLoadetr 的 外 观 模式 


此 处 为 读者 简单 地 介绍 了 两 种 设计 模式 ， 当 然 源码 中 还 存在 很 多 设计 模式 ，WebKit 内 核 源码 作为 优秀 的 开源 工程 ， 有 很 多 设计 精华 值得 我 们 学 习 并 深刻 领会 。 我 们 熟知 的 工厂 方法 、 单 例 、 观 察 者 等 设 
计 模式 ， 甚 至 还 有 多 种 设计 模式 融合 使 用 的 应 用 场景 ， 都 在 源码 中 有 所 体现 ， 也 希望 读者 能 够 在 源码 中 领略 设计 模式 的 魅力 。 


43 ”MainResourceLoader 资 源 加 载 流程 


43.1. FAJA 


针对 主 资源 的 加 载 机 制 ， 在 Android 4.2 和 Android 4.4 平 台 的 实现 是 有 差异 的 。 其 中 ， 在 Android 4.2 中 没有 使 用 缓存 机 制 。 读 者 如 果 对 主 资源 的 缓存 机 制 实现 有 兴趣 ， 可 以 参考 Android 4.4 平 台 的 浏 
览 器 源码 实现 。 本 节 以 Android 4.2 平 台 的 源码 为 例 ， 为 大 家 剖析 主 资源 的 加 载 流程 。 


4.4 SubResourceLoader 资 源 加 载 流程 


4.4.1 派生 资源 


在 Android 4.2 平 台中 WebKit 派 生 资源 包含 的 类 型 主要 如 下 : 
“JavaScript 文 本 (CachedScript) : JavaScript 脚 本 文件 ; 
CSS 文本 (CachedCSSStyleSheet) : CSS 样 式 文件 ; 


: BA (Cachedlmage) : 各 种 类 型 的 图 片 文件 ; 


: 字体 (CachedFont) : 字体 文件 ; 


: XSL 样 式 表 (CachedXSLStyleSheet) : XSLT 语 言 的 文本 。 
































可 以 说 除去 主 资源 剩 下 的 网 页 资源 都 是 派生 资源 。 派 生 资源 在 WebKit 中 都 有 对 应 的 类 实现 ， 它 们 有 着 共同 的 基 类 (CahedResource) , 


体 的 实现 读者 可 参考 源码 。 在 Android 4.4 平 台中 ， 派 生 资源 
的 种 类 也 有 所 增加 ， 如 ShadeResource、RawResource 等 。 





4.5 WebKit 网 络 库 chrome-net 介 绍 

















从 Android 4.0 开 始 WebKit 使 用 chrome-net 作 为 网 络 库 。chrome-net 是 Google 为 Chromium 开 发 的 网 络 协议 栈 ， 提 供 了 较 好 的 跨 平 台 支 持 ， 并 且 Google 在 其 中 做 了 许多 优化 ， 比 如 TCP 预 链接 、 
DNS 预 取 、 流 式 HTTP (http pipeline) 以 及 spdy 等 。 








4.66 WebKit 中 的 Cache 





缓存 在 WebKit 中 也 得 到 了 广泛 的 应 用 ， 对 提高 用 户 体 验 起 到 了 重要 作用 。 在 WebKit 中 ， 主 要 存在 三 种 类 型 的 缓存 : Page Cache、Memory Cache、Disk Cache。 这 三 类 Cache 的 容量 都 是 可 以 配置 
的 ， 比 如 限制 Memory Cache 最 大 不 超过 30MB，Page Cache 缓 存 的 页 面 数量 不 超过 5 个 等 。 本 节 为 读者 介绍 三 者 的 区 别 和 联系 ， 使 读者 加 深 对 缓存 机 制 的 理解 。 


























“ Page Cache: 是 将 浏览 的 页 面 状 态 临 时 保存 在 缓存 中 ， 以 加 速 页 面 返回 等 操作 。 





* Memory Cache: 浏览 器 内 部 的 缓存 机 制 ， 对 于 相同 utl 的 资源 直接 从 缓存 中 获取 ， 不 需 重新 下 载 。 


` Disk Cache: 资源 加 载 缓存 和 服务 器 进行 交互 ， 服 务 器 端 可 以 通过 HTTP 头 信息 设置 网 页 要 不 要 缓存 。 
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本 章 主 要 介绍 了 Loader 模 块 的 设计 与 实现 ， 包 括 Loader 的 相关 类 介绍 ， 使 用 的 设计 模式 等 内 容 。 使 用 源码 相 结 合 的 方式 着 重 介绍 了 主 资源 、 派 和 
库 chrome-net 以 及 Memory Cache 和 Page Cache 等 内 容 。Loader 模 块 较为 复杂 但 非常 重要 ， 希 望 本 章 的 内 容 能 给 读者 一 些 帮助 。 





资源 的 加 载 流 程 。 最 后 简要 介绍 了 WebKit 使 用 的 网 络 


























第 5 章 ”网 页 解析 


本 章 主要 内 容 





WebKit 网 页 解析 概述 

: DOM 模 型 简介 

: HTML 解析 及 DOM 树 、Render 树 、RenderLayer 树 的 创建 
“ CSS 样式 表 处 理 


“ JavaScript 脚 本 执行 





第 4 章 中 介绍 了 WebKit 中 Loader 模 块 的 资源 加 载 流程 ， 通 过 第 4 章 的 介绍 我 们 知道 网 页 内 容 以 字 节 流 的 形式 传 到 了 WebKit。 本 章 将 详细 分 析 WebKit 解 析 字 节 流 形式 的 网 页 内 容 ， 以 及 生成 DOM 树 、 
Render 树 、RenderLayer 树 的 过 程 。 同 时 本 章 会 对 CSS 样 式 表 和 解析 ，JavaScript 脚 本 执行 做 具体 的 讨论 。 























5.1 WebKit 网 页 解析 概述 


我 们 可 以 将 WebKit 整 体 看 作 一 个 网 页 处 理 模块 ， 这 个 模块 的 输入 是 网 络 上 接收 到 的 字 节 流 形式 的 网 页 内 容 。 输 出 是 三 棵 树 型 逻辑 结构 : DOM 树 、Render 树 及 RenderLayer 树 。WebKit 的 解析 过 程 就 
是 将 字 节 流 形式 的 网 页 内 容 构 建成 DOM 树 、Render 树 及 RenderLayer 树 的 过 程 。WebKit 的 解析 对 象 是 网 页 内 容 ， 本 节 首 先 回顾 一 下 网 页 内 容 的 构成 。 

















“HTML 文档 : 超 文 本 标记 语言 ， 制 作 Web 页 面 的 标准 语言 。 





"CSS 样式 表 (Cascading Style Sheet) : 级 联 样式 表 ， 用 来 控制 网 页 样式 ， 并 允许 样式 信息 与 网 页 内 容 相 分 离 的 一 种 标记 性 语 


“ JavaScript 脚 本 : JavaScript 是 一 种 无 类 型 的 解释 型 脚本 语言 。 常 用 于 为 网 页 添加 动态 功能 。 





HTML 文 档 决 定 了 DOM 树 及 Render 树 的 结构 。CSS 样 式 表决 定 了 Render 树 上 节点 的 排版 布局 方式 。JavaScript 代 码 可 以 操作 DOM 树 ， 改 变 DOM 树 的 结构 ， 也 可 以 用 来 给 页 面 添加 更 丰富 的 动态 功 
能 。5.3 节 将 分 别 详细 讲解 这 三 种 网 络 资源 的 具体 解析 过 程 。 
































HTML 文 档 被 解析 生成 DOM 树 ， 由 DOM 节 点 创建 Render 树 节点 时 ， 会 触发 CSS 





匹配 过 程 ，CSS 匹 配 的 结果 是 RenderStyle 实 例 ， 这 个 实例 由 Render 节 点 持 有 ， 保 存 了 Render 节 点 的 排版 布局 信息 。 
CSS 的 解析 过 程 即 是 CSS 语 法 在 WebKit 的 内 部 表示 过 程 ， 解 析 的 结果 是 得 到 一 系列 的 CSS 规 则 。CSS 的 匹配 过 程 主要 依据 CSS 选 择 器 的 不 同 优先 级 进行 ， 高 优先 级 选择 器 优先 适用 。 根 据 网 页 上 定义 的 
JavaScript 脚 本 的 不 同属 性 ，JavaScript 脚 本 的 下 载 和 执行 时 机 会 有 所 不 同 。JavaScript 脚 本 的 执行 是 由 WebKit 转 交 给 JS 引 擎 执行 的 。 下 面 我 们 分 别 看 一 下 HTML、CSS、JavaScript 的 具体 解析 和 执行 。 



























































5.2 ”DOM 模型 简介 














DOM (Document Object Model, 文档 对 象 模型 ) ， 是 中 立 于 平台 和 语言 的 接口 。 它 允许 程序 和 脚本 动态 地 访问 和 更 新 文档 的 内 容 结构 和 样式 。DOM 是 页 面 上 数据 和 结构 的 一 个 树 形 表示 ， 使 
DOM 接 口 可 以 对 DOM 树 结构 进行 操作 。DOM 规 范 只 是 定义 了 编程 接口 ， 没 有 对 文档 的 表示 方式 做 任何 限制 。 以 树 状 结构 表示 DOM 文 档 是 比较 普遍 的 实现 方式 。 这 个 树 状 结构 就 称 为 DOM 树 。DOM 树 是 
DOM 文 档 中 的 节点 按照 层次 组 织 构成 的 。 以 HTML 文 档 为 例 ， 每 一 个 标签 都 对 应 着 DOM 树 上 的 一 个 节点 。 由 于 是 树 形 结构 表示 ， 这 些 节点 之 间 的 关系 也 是 通过 父子 或 兄弟 维系 的 。 下 面 我 们 给 出 一 个 简单 
的 HTML 文 档 及 其 DOM 树 表示 ， 如 图 5-1 所 示 。 
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Documnt 
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<html> 
<head></head> 
<body> 
«div 
<a>http://www.baidu.com</a> 
</div> 
</body> 


</html> 





图 5-1 HTML 文档 及 其 DOM 树 


5.3 ”HTML 解析 过 程 


本 节 分 为 3 个 小 节 ， 分 别 介绍 DOM 树 、Render 树 和 RenderLayer 树 的 构建 。 


5.4 CSS 样式 表 处 理 


5.4.1 CSS 文 档 结构 











CSS 文 档 通 常 包含 一 系列 的 样式 规则 ， 一 条 样式 规则 的 组 成 包括 一 组 选择 器 和 一 个 样式 集合 。 样 式 集合 由 一 个 或 多 个 样式 声明 组 成 ， 每 个 样式 声明 由 样式 属性 和 属性 值 组 成 。 下 面 分别 介 绍 选择 器 和 样 
式 声明 。 


. 选择 器 : CSS 的 选择 器 是 一 组 模式 ， 用 来 匹配 相应 的 HTML 元素。 所 有 被 选择 器 匹配 成 功 的 HTML 元 素 都 会 应 用 该 选择 器 所 对 应 的 样式 规则 。CSS 规 范 定 义 了 42 种 不 同类 型 的 选择 器 ， 包 括 标签 选择 
器 、 属 性 选择 器 、 类 型 选择 器 、ID 选 择 器 、 后 代 选 择 器 等 。 不 同 的 选择 器 有 不 同 的 匹配 模式 ， 如 标签 选择 器 通过 标签 来 匹配 目标 元 素 ， 属 性 选择 器 通过 属性 值 来 匹配 目标 元 素 。 


“样式 声明 : 样式 声明 定义 了 HTML 元 素 的 排版 布局 方式 。CSS 标 准 定义 了 各 式 各 样 的 样式 属性 。 这 些 属性 可 以 大 致 分 为 以 下 几 类 。 


“ 字体 : 设置 字体 属性 、 名 称 、 大 小 、 样 式 等 。 


“文本 : 设置 对 齐 方式 、 文 字 间 距 、 缩 进 、 空 白 符 处 理 、 文 字 行 高 等 。 


“ 列表 : 设置 列表 的 标志 类 型 、 标 志 位 置 。 





“ 背景 : 设置 背景 颜色 或 者 背景 图 片 。 











定位 : 设置 元 素 的 相对 或 绝对 位 置 。 





CSS 文 档 的 构成 如 图 5-10 所 示 。 











CSS Rule 1 


CSS Rule 2 CSS Rule N 


CSS Selector 1 
CSS Selector 2 


CSS Selector N 


CSS Property ID: Value 


CSS Property ID: Value 


CSS Property ID: Value 


图 5-10 ”CSS 文档 结构 














CSS Document 包 含 多 个 CSS Rule, CSS Rule 包 含 一 组 CSSSelector 和 一 组 CSSProperty。 一 个 CSSProperty 包 含 一 个 CSSPropertylD 和 一 个 CSSValue。 下 面 的 代码 清单 是 一 个 简单 的 CSS 样 式 规则 的 


例子 : 





body { 
font-family: Verdana, sans-serif; 


) 
td, ul, ol, ul, li, dl, dt, dd { 
font-family: Verdana, sans-serif; 


H 


font-family: Times, "Times New Roman", serif; 


} 





CSS 标 准 定义 了 多 种 类 型 的 样式 规则 : 

* Import: 通过 style 元 素 引 入 外 部 CSS 文 件 的 一 种 方式 。 

' Media: 允许 在 同一 样式 表 中 为 不 同 的 媒介 使 用 不 同 的 样式 规则 。 
KeyFrames: 创建 动画 。 

“ KeyFrame: 定制 特定 帧 的 样式 信息 。 

Page: 设置 页 面容 器 的 版 式 、 方 向 、 补 丁 等 。 


: Font Face: 允许 引入 自 定义 字体 。 


` Style: 绝 大 多 数 定义 网 页 元 素 布 局 排版 的 样式 规则 都 属于 Style 规 则 。 





























CSS 样 式 表 的 使 用 有 两 种 方式 : 通过 style 标 签 或 者 通过 link 标 签 使 F 








。 通 过 style 标 签 是 将 CSS 代 码 直接 嵌入 HTML 文 档 中 ， 所 以 这 种 方式 的 样式 表 称 为 内 部 样式 表 。 通 过 link 标 签 是 将 独立 的 CSS 文 档 引 


入 到 HTML 文 档 ， 这 种 方式 的 样式 表 称 为 外 部 样式 表 。 了 解 了 CSS 文 档 的 组 成 结构 后 ， 接 下 来 我 们 介绍 WebKit 对 CSS 文 档 的 解析 过 程 。 


5.5 ”JavaScript 脚 本 执行 











Javascript 是 一 种 解释 型 的 动态 脚本 语言 ， 需 要 由 专门 的 JavaScript 引 擎 执行 。WebKit 默 认 采 用 的 Javascript 执 行 引擎 为 JavascriptCore， 其 代码 位 于 Source/JavascriptCore 目 录 。Android 4.2 版 本 的 
WebKit 采 用 的 Javascript 执 行 引 警 为 V8，V8 是 由 Google 支 持 的 开源 项 目 。 它 的 设计 目的 就 是 追求 更 高 的 性 能 ， 最 大 限度 地 提高 JavaScript 的 执行 效率 。 与 JavaScriptCore 等 传统 引擎 不 同 ，V8 把 Javascript 
代码 直接 编译 成 机 器 码 运行 ， 比 起 传统 “中 间 代 码 + 解释 器 ”的 引擎 ， 性 能 优势 非常 明显 。Js 代 码 通常 保存 在 独立 的 JS 文件 中 ， 通 过 script 标 签 引 用 到 HTML 文 档 中 。 下 面 是 一 个 简单 的 script 标 签 使 用 示例 : 





















































«html» 
«head» 
«title»Script Test«/title» 
</head> 
<body> 
<script type="text/javascript" src="javascriptfile.js"></script> 
</body> 
</html> 





DOM 树 创建 过 程 中 遇 到 script 标 签 时 会 创建 HTMLScriptElement 实 例 。HTMLScript-Element 的 父 类 ScriptElement 中 包含 了 对 JS 脚 本 的 所 有 处 理 ， 包 括 下 载 、 缓 存 、 执 行 等 。JS 代 码 的 下 载 是 由 
ScriptElement 的 requestScript(0) 接 口 触发 的 。 这 个 接口 会 调用 CachedResourceLoader 的 requestScript(0) 接 口 加载 1S 脚 本。 根据 script 标 签 的 不 同属 性 ，JS 脚 本 加 载 后 的 执行 时 机 会 有 所 不 同 。 如 果 script 标 
签 中 使 用 了 async 属 性 ，JS 脚 本 加 载 过 程 不 会 阻塞 文档 解析 ， 脚 本 加 载 完成 后 会 立即 执行 。 如 果 sript 标 签 中 使 用 了 defer 属 性 ，JS 肢 本 加 载 过 程 不 会 阻塞 文档 解析 ， 当 脚本 的 执行 要 等 得 到 文档 解析 完成 之 
后 。 对 于 外 部 引用 的 脚本 文件 ， 从 脚本 下 载 到 脚本 执行 完 ， 文 档 解 析 过 程 会 一 直 被 阻塞 。 下 面 我 们 给 出 WebKit 为 解析 和 执行 JS 脚本 构建 的 主要 类 之 间 的 关系 图 ， 如 图 5-15 所 示 。 
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图 5-15 JS 脚 本 解析 执行 类 图 
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5-15 中 类 的 主要 作用 如 下 : 

















: HTMLScriptRunner: 控制 单个 JS 文 件 的 执行 ， 根 据 script 标 签 的 不 同属 性 控制 JS 文 件 的 执行 时 机 。 

“ScriptRunner: 是 JS 资源 执行 的 管理 类 ， 用 于 对 网 页 中 的 多 个 JS 资源 的 执行 实现 调度 。 

* ScriptController: 维护 V8 执 行 环境 ， 调 用 V8SctiptRunnet 执 JS 行 解 析 。 

: V8ScriptRunner: WebKit 与 V8 的 桥接 类 ， 提 供 了 编译 及 运行 脚本 的 接口 ，V8ScriptRunner 最 终 会 调用 到 V8 中 提供 的 API。 


- HTMLScriptElement: 代表 了 网 页 上 的 一 个 sctipt 元 素 。 





JS 脚本 的 执行 流程 如 图 5-16 所 示 。 











javascript execute 


HTMLDocumentParser HTMLScriptRunner Scriptl oader ScriptController V8ScriptRunner 


runScriptsForPaused 
TreeBuilder() 


== 
prepareScript() 
requestScipt() 
executeScript() 
executeScriptIn 
MainWorld() 
compileAndRun 
Script 


图 5-16 JS 脚本 执行 流程 


























JS 脚本 执行 的 入 口 在 HTMLDocumentParser 的 runScriptsForPausedTreeBuilder(0) 函 数 中 。WebKit 根 据 script 元 素 属性 的 不 同 会 在 不 同时 机 执行 JS 脚本 。 大 致 可 分 为 三 种 情况 : 











- 使 用 async 属 性 : ScriptRunner:notifyScriptReady0 触 发 执行 。 
: 使 用 defer 属 性 : HTMLDocumentParser:notifyFinished0 在 页 面 解析 完成 时 触发 执行 。 
“ 没有 async 和 defer 属 性 的 JS 肢 本: HTMLScriptRunner:executeParsingBlockingScripts0 触 发 执行 。 


至 此 ，JS 脚 本 的 执行 过 程 就 介绍 完了 。 


5.6 本章 小 结 





本 章 主要 讲解 网 页 资源 的 解析 过 程 ， 包 括 HTML 文 档 解析 、CSS 文 件 解析 、JS 肢 本 解析 。HTML 文 档 解析 部 分 介绍 了 WebKit 的 DOM 树 、Render 树 、RenderLayer 树 的 具体 创建 流程 及 三 棵 树 之 间 的 关 
系 。CSS 文 件 解析 部 分 介绍 了 CS 文档 的 构成 ，Webkit 为 表示 CSS 文 档 创建 的 一 系列 类 ，CS5 文 件 解析 的 结果 是 存储 了 CSS 规 则 的 一 个 CSSRuleList 实 例 。 这 个 实例 会 作为 CSS 匹 配 过 程 的 输入 ，CSS 匹 配 过 程 
的 输出 是 存储 了 CSS 属 性 的 RenderStyle 实 例 。 匹 配 过 程 是 依据 选择 器 的 优先 级 进行 的 ， 高 优先 级 选择 器 对 应 的 CSS 规 则 会 被 优先 选取 。JS 脚 本 解析 部 分 介绍 了 WebKit 调 用 V8 解 析 JS 脚 本 的 具体 过 程 。 这 部 
需要 注意 的 是 JS 脚本 的 执行 时 机 问题 ， 根 据 script 标 签 的 属性 不 同 ，WebKit 会 在 不 同时 机 执行 JS 脚本 。 





















































som ”排版 布局 


本 章 主要 内 容 





| CSSA 


“ Render 类 的 核心 对 象 及 方法 


' Render 树 创建 流程 代码 分 析 


< 布局 流程 代码 分 析 


“ 绘制 流程 代码 分 析 








第 5 章 对 DOM 树 的 创建 流程 进行 了 详尽 分 析 ， 同 时 也 介绍 了 Render 树 的 生成 过 程 。 本 章 将 在 第 5 章 的 基础 之 上 ， 再 详细 介绍 CSS 盒 模型 的 作用 ，RenderObject 及 其 子 类 ， 网 页 布局 和 绘制 相关 的 关键 流 
程 。 





6.1 CSS 合 模型 





CSS 是 Cascading Style Sheets (RERE) 的 缩写 ， 是 浏览 器 演 染 引擎 排版 布局 的 技术 规范 ， 通 过 它 可 以 有 效 地 对 页 面 的 布局 方式 、 字 体 大 小 等 实现 精确 控制 ， 目 前 最 新 的 标准 是 CSS3。 











盒 模式 (又 称 框 模型 ) 是 CSSs 的 核心 概念 之 一 ， 它 把 页 面 上 的 元 素 看 成 一 个 “矩形 盒子 ”， 这 个 矩形 包含 了 外 边 距 (margin) 、 内 边 距 (padding) 、 边 框 (border) 和 内 容 区 (content) , CSS 
模型 示意 图 如 图 6-1 所 示 。 最 外 层 的 虚线 以 内 就 是 一 个 盒 模型 的 实例 ， 这 个 实例 表示 的 就 是 一 个 元 素 布局 表示 。 
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从 3D 角 度 看 具体 网 页 “盒子 ”的 样子 如 图 6-2 所 示 。 




















图 6-2 ” 金 模 型 一 百度 首页 3D 视 图 














由 图 6-2 可 以 看 出 ， 排 版 其 实 就 是 对 这 些 “ 盒 子 ” 依 据 某 种 规则 进行 摆 放 。 根 据 不 同 盒子 的 排版 属性 ，CSS 规 范 还 把 “盒子 ”进行 分 类 ， 粗 略 可 分 为 Block-Box、Inline-Box、Inline-Block 等 ， 各 自 含义 





1) Block-Box 在 包含 块 内 是 从 上 往 下 顺序 赦 放 。 
2) Inline-Box 在 一 行 的 水 平方 向 上 布置 。 


3) Inline-Block 从 外 部 看 表现 与 Inline-Box 一 样 ， 内 部 则 是 Block-Box 方 式 排 版 。 


62 ”定位 与 包含 块 





那 “ 盒 子 ”之 间 的 相对 位 置 是 如 何 确定 的 ? 答案 是 定位 模型 与 包含 块 。CSS 规 范 定义 了 4 种 定位 模型 。 

“静态 (static) 定位 。 如 果 是 Block 块 级 元 素 将 在 文档 流 “ 合 适 位 置 ”生成 一 个 给 形 框 ， 然 后 插入 文档 流 中 ; 如 果 是 Inline 行 内 元 素 ， 则 会 创建 一 个 或 多 个 行 框 ， 将 Iniline 元 素 置 于 其 父 元 素 中 。 
“ 相对 (relative) 定位 。 这 种 类 型 的 金子 首先 将 其 作为 “静态 定位 ”进行 定位 ， 然 后 相对 这 个 静态 位 置 做 一 个 偏 移 ， 并 且 保 留 其 作为 静态 定位 时 的 空间 。 

“ 绝对 (absolute) 定位 。 这 种 类 型 的 金子 将 从 文档 流 删除 ， 并 相对 于 其 “包含 块 ”进行 定位 。 


AR (fixed) 定位 。 类 似 于 绝对 定位 ， 只 是 它 的 包含 块 是 “Viewport”。 

















此 外 ，CSs 中 还 有 一 种 带 浮动 (float) 属性 的 盒子 ， 作 用 就 是 改变 块 元 素 对 象 的 默认 显示 方式 。 浮 动 的 “盒子 ”可 以 向 左 或 向 右 移动 ， 直 到 它 的 外 边缘 碰 到 包含 块 或 另 一 个 浮动 “盒子 ”的 边框 为 止 ， 
并 且 浮 动 “盒子 ”不 在 文档 的 普通 流 中 ， 所 以 文档 的 普通 流 中 的 “盒子 ”表现 得 就 像 浮 动 “盒子 ” 不 存在 一 样 。 




















上 面 提 到 “包含 块 ”这 个 概念 ， 那 么 什么 是 包含 块 呢 ? “包含 块 ” (containing block) 是 排版 格式 化 模型 的 一 个 重要 概念 ， 用 于 确定 “盒子 ”的 相对 位 置 和 大 小 ， 而 计算 过 程 中 通常 需要 参考 该 元 素 
所 在 的 “包含 块 ”。 一 般 有 以 下 包含 块 : 














“ 根 元 素 的 包含 块 又 称 初始 包含 块 ， 它 的 大 小 等 于 可 视 区 域 的 大 小 ， 通 常 是 WebView 的 大 小 。 
“ 静态 或 相对 定位 元 素 的 包含 块 就 是 其 最 近 的 祖先 金子 模型 中 的 内 容 区 域 。 
“ 国定 定位 元 素 是 将 其 国定 在 可 视 区 域 的 某 个 特定 位 置 ， 滚 动 页 面 时 国定 定位 元 素 不 会 随 着 页 面 滚动 ， 包 含 块 是 “初始 包含 块 ”。 


“ 绝对 定位 元 素 的 包含 块 通常 是 由 其 最 近 的 非 静 态 定 位 的 祖先 决定 ， 其 位 置 相对 包含 块 国定 不 变 。 如 果 祖 先是 Inline 类 型 元 素 ， 包 含 块 是 包含 该 祖先 的 第 一 个 和 最 后 一 个 Inline 念 子 的 内 边 距 的 区 域 ; 否 
则 ， 则 是 由 该 祖先 的 内 边 距 所 包围 的 区 域 。 


计算 包含 块 的 代码 如 下 所 示 ， 为 了 便于 理解 ， 对 代码 做 了 精简 : 


【一 RenderObject.cpp]】 





RenderBlock* RenderObject::containingBlock() const ( 
// 对 RenderView ， 其 包含 块 就 是 自己 即 初始 包含 块 
if (isRenderView())return const cast<RenderView*> (toRenderView (this)); 
RenderObject* o = parent(); // 当前 RenderObject 的 父 节 点 
if (!isText() && m style->position() == FixedPosition) { 
// 国定 定位 的 RenderObject 的 包含 块 : 
// 1) 要 么 是 RenderView (初始 包含 块 ) 
// 2) 要 么 是 有 Transform 属 性 的 RenderBlock 
while (o && !o-»isRenderView() && !(o-»hasTransform() && o-»isRenderBlock())) 
o = o-»parent(); 
} else if (lisText() && m style-»position() == AbsolutePosition) ( 
// 绝对 定位 的 RenderObject 的 包含 块 : 
// 1) 要 么 是 RenderView (初始 包含 块 ) 
//2) 要 么 是 有 Transform 属 性 的 RenderBlock 
// 3) 要 么 是 非 Inline 且 是 相对 /固定 /绝对 定位 之 一 的 RenderObject 
// 4) 如 果 父 节点 是 相对 定位 且 是 Inline 的 ， 返 回 的 是 父 节 点 的 包含 块 
while (o && (o-»style()-»position() == StaticPosition || (o-»isInline() && 
!o-»isReplaced())) && !o-»isRenderView() && !(o-»hasTransform() && o-»isRenderBlock())) { 
// For relpositioned inlines, we return the nearest enclosing block. We don't try 
// to return the inline itself. This allows us to avoid having a positioned objects 
// list in all RenderInlines and lets us return a strongly-typed RenderBlock* result 
// from this method. The container() method can actually be used to obtain the 
// inline directly. 
if (o-»style()-»position() == RelativePosition && o-»isInline() && !o-»isReplaced()) 
return o-»containingBlock(); 
o = o-»parent(); 


} eise ( 
// 静态 定位 或 相对 定位 的 包含 块 通常 等 于 第 一 个 不 是 InLine 的 祖先 RenderObJject 
while (o && ((o-»isInline() && !o-»isReplaced()) || o->isTableRow() || o->isTableSection () 


|| o-»isTableCol() || o-»isFrameSet() || o-»isMedia())) 
o = o-»parent(); 
} 


// 找到 包含 块 了 ， 也 意味 着 包含 块 一 定 是 RenderBlock 类 型 
return toRenderBlock (o); 
l 





上 面 提 到 初始 包 块 即 Viewport， 那 么 它 的 大 小 是 如 何 确定 的 呢 ? 我 们 知道 “初始 包含 块 ”就 是 根 节点 即 RenderView， 接 下 来 将 分 析 RenderView 大 小 是 如 何 计算 的 。 计 算 RenderView 钦 辑 宽 高 的 代码 
在 RenderView.cpp 中 ,分别 是 computeLogicalWidth/Height 方 法 。 由 于 计算 高 度 和 宽度 的 方法 类 似 ， 就 以 omputeLogicalWidth 为 例 分 析 其 计算 过 程 ， 代 码 如 下 : 





【一 RenderView.cpp:computeLogicalWidth]】 





// 为 便于 理解 ， 对 原 代码 做 了 删 减 

void RenderView::computeLogicalWidth() ( 
setLogicalWidth (viewLogicalWidth|()); 

} 





“逻辑 宽度 ”实际 是 考虑 书写 习惯 后 的 宽度 ， 大 多 情况 都 是 返回 viewWidth 的 值 。 





// 为 便于 理解 ， 对 原 代码 做 了 删 减 

int RenderView::viewLogicalWidth() const { 

return style()-»isHorizontalWritingMode() ? viewWidth() : viewHeight(); 
} 








在 下 面 的 RenderView::viewWidth 方 法 中 ，width 的 初始 值 等 于 FrameView::layoutWidth， 而 FrameView 是 ScrollView 的 子 类 ， 因 此 layoutWidth 的 实现 代码 在 ScrollView::layoutWidth 中 。 





[^ScrollView::layoutWidth] 


// 为 便于 理解 ， 对 原 代码 做 了 删 减 

int RenderView::viewWidth() const ( 

int width = 0; 

if (!printing() && m frameView) ( 

width = m frameView-»layoutWidth(); 

width m frameView-»useFixedLayout() ? ceilf(style()-»effectiveZoom() * float(width)) : width; 


return width; 
} 





接着 再 看 ScrollView::layoutWidth 的 实现 代码 ， 最 终 的 返回 


[—ScrollView.cpp:layoutWidth) 


值 是 visibleContentRect().width， 代 码 如 下 : 








// 为 便于 理解 ， 对 原 代码 做 了 删 减 


int ScrollView::layoutWidth() const { 


return m fixedLayoutSize.isEmpty() 


} 
int ScrollView::visibleWidth() 


: m fixedLayoutSize.width(); 


|| !m useFixedLayout ? visibleWidth() 


const ( 


return visibleContentRect () .width ()7 


} 





在 Android 的 WebKit 版 本 中 platformWidget 是 WebCoreViewBridge 类 型 的 指针 ， 定 义 如 下 : 


[^Widget.h] 





dif PLATFORM (ANDROID) 
class WebCoreViewBridge; 


typedef WebCoreViewBridge* PlatformWidget; 


fendif 








[^ScrollView.cpp:layoutWidth] 


因此 ， 下 面 的 getVisibleBounds 方 法 实际 上 是 WebCoreViewBridge::getVisibleBounds， 代 码 如 下 : 





// 为 便于 介绍 流程 ， 代 码 有 精简 


IntRect ScrollView::visibleContentRect (bool includeScrollbars) 


if (platformWidget ()) 


const { 


return platformVisibleContentRect (includeScrollbars); 


} 


IntRect ScrollView::platformVisibleContentRect (bool includeScrollbars) const { 


if (parent()) 


// 有 iframe 则 走 此 分 支 ， 在 此 不 做 进一步 分 析 


return IntRect(0, 0, width(), height()); 


else // root view 


return platformWidget ()-»getVisibleBounds (); 


} 





而 getVisibleBounds 方 法 实现 很 简单 ， 直 接 返 回 m_visibleBounds 成 员 ， 但 m_visibleBounds 是 怎么 来 的 呢 ? 继续 往 下 分 析 ， 代 码 如 下 : 


[^WebCoreViewBridge.h] 























const WebCore::IntRect& WebCoreViewBridge::getVisibleBounds() const ( 


return m visibleBounds; 


} 








[^WebCoreViewBridge.h] 


首先 在 WebCoreViewBridge 构 造 函 数 中 ， 设 置 默认 大 小 为 320x240， 这 个 值 适 | 











于 大 多 数 早 期 手机 屏幕 ， 代 码 如 下 : 

















// 为 便于 理解 ， 对 原 代码 做 了 删 减 


WebCoreViewBridge: :WebCoreViewBridge() { 


m bounds.setWidth (320); 

m bounds. setHeight (240); 

m visibleBounds = m bounds; 
m windowBounds = m bounds; 


} 





但 320x240 显 然 太 小 ， 与 我 们 平常 的 使 








因此 肯定 会 在 某 地 方 更 新 m_visibleBounds 的 值 。 














感受 不 一 样 ， 





Android 系 统 的 WebView 对 象 创建 后 会 调用 WebView.onSizeChanged 方 法 告诉 我 们 当前 WebView 的 大 小 ， 该 方法 经 过 一 些 逻 辑 处 理 后 会 转调 到 ZoomManager.onSizeChanged 人 方法， 而 
ZoomManager.onSizeChanged 会 创建 一 个 PostScale 任 务 ， 此 任务 最 终 会 调用 ZoomManager.setZoomScale 方 法 ， 代 码 如 下 : 


[^ZoomManager.java] 





// 为 便于 理解 ， 对 原 代码 做 了 删 减 


private void ZoomManager.setZoomScale (float scale, boolean reflowText, boolean force) ( 
http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text./ . . http: / /www.hzcourse.com/resource/readBook?path-/openresources/teach ek 


mWebView.sendViewSizeZoom(reflowText); 


} 





setZoomscale 做 了 很 多 计算 工作 ， 其 中 包括 调 有 




















VIEW SIZE CHANGED 消 息 后 会 调 有 
高 度 ， 代 码 如 下 : 


[^WebViewCore.java] 





























WebViewCore.viewSizeChanged 方 法 处 理 此 消息 ，viewSizeChanged 方 法 先 调 


WebView.sendViewSizeZoom 方 法 ， 该 方法 会 发 送 一 个 异步 消息 VIEW_SIZE_CHANGED 通 知 内 核 更 新 WebView 的 大 小 ， 而 WebViewCore 在 收 到 





calculateWindowWidth 确 定 Viewport 的 宽度 ， 待 宽度 确定 后 再 计算 Viewport 的 





// 为 便于 理解 ， 对 原 代码 做 了 删 减 


private void viewSizeChanged (WebViewClassic.ViewSizeData data) { 


int w = data.mWidth; 
int h = data.mHeight; 


http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text./ . . http: / /www.hzcourse.com/resource/readBook?path-/openresources/teach ek 


// 1) 先 计算 宽度 


int width = calculateWindowWidth (w) 7 
// 2) 高 度 需 要 与 宽度 成 比例 ， 因 此 如 果 宽 度 有 变化 则 高 度 需要 按 比 例 调整 


int height = h; 
if (width != w) { 


float heightWidthRatio = data.mHeightWidthRatio; 


float ratio 


(heightWidthRatio » 0) ? heightWidthRatio : 


(float) h / w; 


height = Math.round(ratio * width); 


} 
// 通知 内 核 更 新 size，nativeSetSize 是 Java 方 法 ， 


// 对 应 的 CPP 端 对 象 是 WebVeiwCore.cpp 的 SetSize 
nativeSetSize (mNativeClass, width, height,http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15583/OEBPS/Text/...); 





上 面 代 码 中 的 calculateWindowWidth 是 计算 Viewprot 宽 度 的 关键 方法 ， 算 法 如 下 : 





1) 如 果 是 PC 页 面 ， 默 认 宽 度 是 DEFAULT_VIEWPORT_WIDTH(980)。 


2) 如 果 网 页 设 定 了 宽度 ， 如 <meta namez'"viewport"content- "width 2640"http://www.hzcourse.com/resource/readBook? 





path=/openresources/teach_ebook/uncompressed/15583/OEBPS/Text/…> ， 宽 度 等 于 网 页 设 定 的 值 ， 常 见于 手机 版 的 网 页 。 


3) 如 果 是 device-width， 如 <meta namez'viewport"content- "width z device-width"http://www.hzcourse.com/resource/readBook? 








path=/openresources/teach_ebook/uncompressed/15583/OEBPS/Text/.…> ， 表 示 宽 度 要 与 屏幕 宽度 一 致 ， 常 见于 手机 版 的 网 页 。 





具体 的 实现 代码 如 下 : 


[^WebViewCore.java] 





// 为 便于 理解 ， 对 原 代码 做 了 删 减 
private int calculateWindowWidth (int viewWidth) { 
int width = viewWidth; 
if (mViewportWidth == -1) ( 
width = WebViewClassic.DEFAULT VIEWPORT WIDTH; // PC 网 页 宽度 980 
) else if (mViewportWidth > 0) { T 
width = mViewportWidth; // 网 页 指定 了 宽度 如 content="width=640™ 
} else { 
// 通常 是 手机 页 面 ， 网 页 的 宽度 自动 适应 屏幕 的 宽度 
// content="width=device-width" 
width = Math.round (mWebViewClassic.getViewWidth() *100 / mViewportInitialScale); 
} 
return width; 


} 

















至 此 WebViewCore,java 已 经 把 Viewport 大 小 计算 好 了 ， 剩 下 的 工作 就 是 通知 内 核 更 新 Viewport 的 大 小 ，Java 端 需要 做 的 就 是 调用 WebViewCore.nativeSetSize 方 法 ，WebViewCore.nativeSetSize 











方法 对 应 的 CPP 实现 代码 是 WebVeiwCore.cpp 的 SetSize 方 法 ，SetSize 是 静态 方法 ， 最 终 调 用 WebViewCore::setSizeScreenWidthAndSscale 方 法 ， 代 码 如 下 : 


[^WebVeiwCore.cpp] 


// 为 便于 理解 ， 对 原 代码 做 了 删 减 

static void SetSize(JNIEnv* env, jobject obj, jint nativeobj, jint w, jint h, http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS 
WebViewCore* viewImpl = reinterpret cast«WebViewCore*» (nativeobj); 

viewImpl-»setSizeScreenWidthAndScale (w, h, http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text/...); 


void WebViewCore::setSizeScreenWidthAndScale (int width, int height,int screenWidthhttp://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/C 
// WebCoreViewBridge E 
WebCoreViewBridge* window = m mainFrame-»view()-»platformWidget (); 
http: / /www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text/. .http: / /www.hzcourse.com/resource/readBook?path-/openresources/teach ek 
window-»setSize (width, height); 
window-»setVisibleSize(screenWidth, screenHeight); // 保存 Viewport 
m mainFrame-»view()-»resize(width, height); // 通知 内 核 size 改 变 

















setSizeScreenWidthAndScale 经 过 一 系列 计算 后 ， 最 后 调用 WebCoreViewBridge.setVisibleSize 方 法 把 Viewport 的 大 小 保存 在 WebCoreViewBridge 的 成 员 m_visibleBounds 中 ， 代 码 如 下 : 








[^WebCoreViewBridge.h] 





// 为 便于 理解 ， 对 原 代码 做 了 删 减 

void WebCoreViewBridge::setVisibleSize(int w int h) ( 
m visibleBounds.setWidth (w); 

m visibleBounds.setHeight (h) ; 

} 














至 此 ， 初 始 化 包含 块 的 计算 过 程 分 析 完 毕 。RenderView::layout 方 法 会 调用 RenderView::computeLogicalWidth/Height 方 法 ， 这 两 种 方法 的 返回 值 正 是 保存 在 m_visibleBounds 的 Viewport 的 宽 和 





























在 确定 初始 化 包含 块 大 小 后 ， 再 计算 RenderView 的 子 节点 位 置 就 容易 得 多 ， 其 他 RenderBox 的 计算 最 终 也 是 依据 CSS 的 计算 规范 实现 ， 主 要 实现 代码 在 RenderBox.cpp 中 ， 具 体 实现 是 











RenderBox::computeLogicalWidth/Height 方 法 及 其 他 RenderBox::computeXXXWidth/Height 方 法 ， 在 此 就 不 再 歼 述 。 


6.3 ”Render 类 的 核心 对 象 





























WebKit 演 染 相 关 的 类 都 定义 在 WebCore/rendering 目 录 中 ， 其 中 定义 了 大 量 Render 相 关 的 类 ， 各 类 之 间 的 关系 干 丝 万 缕 ， 细 节 复 杂 繁 多 。 在 此 以 Render 类 的 核心 对 象 作为 介绍 重点 ， 首 先 看 看 





Render 类 的 核心 对 象 的 关系 图 ， 如 图 6-3 所 示 。 
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该 类 是 对 CSS 盒 模型 的 封装 ~ 
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对 CSS 盒 子 相关 属性 的 封装 ~ 


1.RenderObject 


RenderObject 作 为 Render 对 象 的 基 类 是 构成 整个 Redner 树 的 基础 ， 类 似 于 








含 了 很 多 布局 泻 染 


(1) 构建 Render 树 的 基本 方法 


例如 ， 实 现 访 
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图 6-3 Rendi 





RenderLayer 


对 Css 中 Inline 布 局 的 封装 、 


+layout() 


对 CSs 中 Block 布 局 的 封装 


M. 


er 类 的 核心 对 象 的 关系 图 








FDOM 树 的 Node 基 类 ， 地 位 十 分 重要 ， 其 成 员 m_p arent、m_previous、m_next 是 构建 Ren der 树 的 基础 ; 成 员 m_style 包 





问 父亲 、 兄 弟 节点 ， 增 删节 点 等 功能 的 方法 ， 这 些 方法 是 构建 Render 树 的 基本 方法 。 





// 为 便于 理解 ， 对 原 代码 做 了 删 减 
public CachedResourceClient { 
RenderObject* parent() const 
bool isDescendantOf (const RenderObject*) const 


class RenderObject : 


RenderObject* 
RenderObject* 
RenderObject* 
RenderObject* 
RenderObject* 
RenderObject* 
RenderObject* 
RenderObject* 
RenderObject* 
RenderObject* 
RenderObject* 
RenderObject* 
RenderObject* 


const 


previousSibling() const 
nextSibling() const 
firstChild() 
lastChild() const 
nextInPreOrder () 
nextInPreOrder (const RenderObject*) const; 
nextInPreOrderAfterChildren() const; 
nextInPreOrderAfterChildren (const RenderObject*) const; 
previousInPreOrder() const; 
previousInPreOrder (const RenderObject*) const; 
childAt (unsigned) const; 
firstLeafChild() 
lastLeafChild() const; 


const; 


const; 


void addChild(RenderObject*, RenderObject*); 


void removeChild (RenderObject*); 





(2) 布 





局 相关 的 方法 

















例如 ， 判 断 是 否 执行 布局 ， 


m_needsPositionedMovementLayout、m_normalChildNeedsLayout、m_posChildNeedsLayout 成 员 。 


自身 否 需 

















新 布 








局 ， 子 节点 否 需要 





新 布 





局 ， 是 否 清理 当前 布 








局 等 方法 ， 这 些 方 法 的 实现 比较 简单 ， 通 常 是 设置 或 返回 其 m_needsLayout、 





// 为 便于 理解 ， 对 原 代码 做 了 删 减 


class RenderObject : public CachedResourceClient ( 


void 
void 
bool 
bool 
bool 
bool 
bool 
bool 


layout(); 

layoutIfNeeded|(); 

needsLayout() const; 

selfNeedsLayout (bool) const; 
posChildNeedsLayout() const; 
needsPositionedMovementLayout() const 
normalChildNeedslLlayout() const; 
needsSimplifiedNormalFlowLayout() const; 





(3) 访问 DOM 的 对 象 





在 布局 的 过 程 中 ，Render 对 象 可 能 需要 访问 其 对 应 DOM 对 象 或 Document 对 象 ， 可 以 通过 以 下 方法 实现 。 





// 为 便于 理解 ， 对 原 代码 做 了 删 减 
class RenderObject : public CachedResourceClient { 
Node* node() const { 


return m isAnonymous ? 0 : 


} 
void setNode (Node* node) { 
m node = node; 


} 


Document* document () const { 
return m node-»document () 


} 


Frame* frame() const ( 


return document ()-»frame(); 


l 
} 


; // 返回 node 的 document 对 象 


m node; // 匿名 Render 没 有 对 于 的 Node 对 象 


// 返回 对 应 document 的 frame 对 象 





(4) 绘制 相关 方法 

















当 Render 对 象 需要 绘制 时 会 通过 repaint 函 数 ， 它 会 触发 真正 的 网 页 绘制 ， 具 体内 容 将 在 6.6 节 中 详细 分 析 。 











// 为 便于 理解 ， 对 原 代码 做 了 删 减 

class RenderObject : public CachedResourceClient ( 
RenderBoxModelObject* containerForRepaint() const; 

repaintUsingContainer (http: / /www .hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text/...); 


void 
void 
void 
void 
bool 


repaint(bool immediate = false); 
repaintRecursively (bool immediate = false); 


repaintRectangle (const IntRect&, bool immediate 


repaintAfterLayoutIfNeeded|(); 


false); 


virtual void repaintDuringLayoutlfMoved(const IntRect& rect); 
virtual void repaintOverhangingFloats (bool paintAllDescendants - false); 


bool 


checkForRepaintDuringLayout() const; 





(5) RenderLayer 相 关 方 法 


由 于 网 页 是 分 层次 的 ， 








因此 每 个 Render 节 点 所 在 的 层 可 以 通过 enclosingLayer() 方 法 得 到 。 其 他 方法 还 包括 查找 、 删 除 、 添 加 RenderLayer， 代 码 如 下 : 





// 为 便于 理解 ， 对 原 代码 做 了 删 减 
class RenderObject : public CachedResourceClient { 
RenderLayer* enclosingLayer() const; 


bool 


hasLayer() const; 


void moveLayers (RenderLayer* oldParent, RenderLayer* newParent); 
RenderLayer* findNextLayer (…)7 


void 
void 


addLayers (RenderLayer* parentLayer); 
removeLayers (RenderLayer* parentLayer); 





(6) 类 型 查询 方法 








这 些 方法 主要 








true。 对 于 为 何不 




















于 查询 某 一 个 Render 对 象 的 真正 类 型 ，RenderObject 为 这 些 方法 提供 默认 实现 ， 默 认 是 返回 false。 
C++ 自身 的 RTTI 机 制 来 实现 动态 类 型 查询 功能 ， 原 因 


可 能 是 担心 RTTI 的 性 能 问题 。 





具体 的 子 类 会 本 





看 载 相应 的 方法 ， 如 RenderBlock : 








: isRenderBlock 方 法 就 会 返回 





// 为 便于 理解 ， 对 原 代码 做 了 删 减 
class RenderObject : public CachedResourceClient ( 
virtual bool isRenderBlock() const ( return false; 


virtual bool isRenderButton 


virtual bool isRenderImage( 


const ( return false; 


const ( return false; 


0 

virtual bool isRenderlIFrame() const ( return false; 
) 
( 


virtual bool isRenderInline() const ( return false; 
virtual bool isRenderPart() const ( return false; } 
virtual bool isRenderView() const ( return false; } 
virtual bool isReplica() const ( return false; } 


} 
} 
} 
} 
} 





(7) RenderStyle 相 关 方 法 








这 些 方法 用 于 增删 改 查 的 该 Render 节 点 CSS 属 性 。 

















// 为 便于 理解 ， 对 原 代码 做 了 删 减 

class RenderObject : public CachedResourceClient { 
RenderStyle* style() const; 
virtual void setStyle (PassRefPtr«RenderStyle»?); 


bool 
bool 
bool 
bool 
void 


isFloating() const; 
isPositioned() const 
isRelPositioned() const; 
isInline() const; 
setIsBox(); 





(8) 调试 方法 














这 些 方法 用 于 调试 Render 树 的 布局 、 位 置 、 大 小 、 样 式 等 。 














// 为 便于 理解 ， 对 原 代码 做 了 删 减 
class RenderObject : public CachedResourceClient ( 


void 
void 
void 
void 
void 


showTreeForThis() const; 
showRenderTreeForThis() const; 
showLineTreeForThis() const; 
showRenderObject() const; 

showRenderObject (int printedCharacters) const; 





2.RenderBoxModelObject 





RenderBoxModelObject 继 承 自 RenderObject， 是 对 CSS 中 盒 模 型 的 封装 。 所 有 符合 CSS 盒 模型 的 Render 对 象 都 是 RenderBoxModelObject 或 其 子 类 。RenderBoxModelObject 定 义 了 CSS 盒 模型 所 
需要 的 接口 方法 。 








// 为 便于 理解 ， 对 原 代码 做 了 删 减 
class RenderBoxModelObject : public RenderObject ( 
virtual bool requiresLayer() const ( 


return isRoot() || isPositioned() |lisRelPositioned() |l 
isTransparent() || hasOverflowClip() || 

hasTransform() || hasMask() || hasReflection() || 
style()-»specifiesColumns() || style()-^hasFixedBackgroundImage (); 


l 

virtual int paddingXXX (bool includeIntrinsicPadding = true) const; 
virtual int borderXXX() const; 

virtual int marginXXX() const; 


3.RenderBox 
































RenderBox 类 是 所 有 Block 级 元 素 的 基 类 ， 它 继承 自 RenderBoxModelObject， 了 RenderObject 和 RenderBoxModelObject 提 供 的 一 些 方法 。 该 类 最 重要 的 作用 是 实现 了 布局 过 程 中 计算 盒子 宽 
高 的 computeLogicalWidth/Height0 及 一 系列 以 compute 开 头 的 方法 ， 这 些 方 法 的 实现 是 以 CSS 规 范 为 依据 的 。 








// 为 便于 理解 ， 对 原 代码 做 了 删 减 
class RenderBox: public RenderBoxModelObject { 、 
virtual void layout(); 
virtual void computeLogicalWidth(); // 计算 盒子 的 宽 高 
virtual void computeLogicalHeight () 7 
int contentLogicalWidth() const; 
int contentLogicalHeight() const; 
virtual int marginStart() const; 
virtual int marginEnd() const; 
void setX(int x); 
void setY(int y); 
void setWidth (int width); 
void setHeight (int height); 





4.RenderBlock 








RenderBlock 继 承 自 RenderBox， 代 表 CSs 标 准 中 Block 级 的 盒 元 素 ， 它 本 身 是 一 个 巨 类 ， 包 含 了 大 量 的 方法 ， 代 码 量 也 非常 多 。RenderBlock 包 含 的 方法 可 以 划分 为 以 下 几 类 。 





TT 














(1). 布局 相关 的 方法 











这 类 方法 包括 布局 Inline 子 节点 、Block 子 节点 、 定 位 元 素 子 节点 等 。 


// 为 便于 理解 ， 对 原 代码 做 了 删 减 

class RenderBlock : public RenderBox { 
virtual void layoutBlock(bool relayoutChildren, int - 0); 
virtual void markForPaginationRelayoutIfNeeded|(); 
virtual void layout(); 
void layoutPositionedObjects (bool relayoutChildren); 
layoutInlineChildren(true, repaintLogicalTop, repaintLogicalBottom); 
void layoutBlockChildren (bool relayoutChildren, int& maxFloatLogicalBottom); 
void layoutInlineChildren (bool relayoutChildren, int& repaintLogicalTop, int& ); 
bool layoutColumns (bool hasSpecifiedPageLogicalHeight, int pageLogicalHeight, &); 
void layoutBlockChild(RenderBox* child, MarginInfo&, int& , int& ); 





(2) Float 浮 动 相关 的 方法 


这 些 方 法 包括 删除 、 插 入 浮动 节点 以 及 如 何 计算 浮动 节点 的 位 置 等 。 





// 为 便于 理解 ， 对 原 代码 做 了 删 减 

class RenderBlock : public RenderBox ( 

bool containsFloats() ; 

bool containsFloat (RenderBox*); 

struct FloatingObject { 

http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text./ . . http: / /www.hzcourse.com/resource/readBook?path-/openresources/teach ek 
H 

int logicalTopForFloat (const FloatingObject* child) const; 

void setLogicalTopForFloat (FloatingObject* child, int logicalTop) 
FloatingObject* insertFloatingObject (RenderBox*); 

void removeFloatingObject (RenderBox*); 

virtual bool avoidsFloats() const; 

void adjustFloatingBlock (const MarginInfo&); 

bool handleFloatingChild (RenderBox* child, const MarginInfo&); 

class FloatingObjects { 

http://www .hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text/ . . http: / /www.hzcourse.com/resource/readBook?path-/openresources/teach ek 
Nu 
OwnPtr«FloatingObjects» m floatingObjects; 





(3) 绘制 相关 方法 


这 类 方法 包括 绘制 Float 节 点 、 绘 制 outline、 绘 制 选择 








Dx 





// 为 便于 理解 ， 对 原 代码 做 了 删 减 
class RenderBlock : public RenderBox { 
virtual void paint(PaintInfo&, int tx, int ty); 
virtual void paintObject(PaintInfo&, int tx, int ty); 
void paintFloats(PaintInfo&, int tx, int ty, bool = false); 
void paintContents (PaintInfo&, int tx, int ty); 
void paintChildren(PaintInfo&, int tx, int ty); 
virtual IntRect rectWithOutlineForRepaint (RenderBoxModelObject* , int ); 
virtual RenderStyle* outlineStyleForRepaint() const; 
virtual IntRect selectionRectForRepaint (RenderBoxModelObject* , bool); 





(4) 计算 margin 相 关 方 法 


计算 margin 的 过 程 复杂 细节 多 ， 除 了 要 区 分 书写 习惯 外 还 要 处 理 相 邻 Block 盒 子 的 margin 塌 陷 效应 ， 为 此 还 定义 了 内 部 类 MarginValues、Marginlnfo 辅 助 计算 。 

















// 为 便于 理解 ， 对 原 代码 做 了 删 减 
class RenderBlock : public RenderBox ( 
int marginBeforeForChild (RenderBoxModelObject* child) const; 


int marginAfterForChild (RenderBoxModelObject* child) const; 
int marginStartForChild (RenderBoxModelObject* child) const; 
int marginEndForChild (RenderBoxModelObject* child) const; 
int collapsedMarginBeforeForChild (RenderBox* child) const; 
int collapsedMarginAfterForChild(RenderBox* child) const; 
class MarginValues ( 
http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text./ . . http: / /www.hzcourse.com/resource/readBook?path-/openresources/teach ek 
E 
MarginValues marginValuesForChild (RenderBox* child); 
virtual int collapsedMarginBefore() const; 
virtual int collapsedMarginAfter() const; 
class MarginInfo ( 
void clearMargin() ( m positiveMargin = m negativeMargin = 0; ] 
void setPositiveMargin(int p) { m positiveMargin = p; } 
void setNegativeMargin(int n) ( m negativeMargin = n; } 
int margin() const ( return m positiveMargin - m negativeMargin; } 


H 





5.RenderView 











RenderView 继 承 自 RenderBlock， 在 Document'::attach 方 法 中 会 创建 RenderView 对 象 ， 它 是 整个 Render 树 的 根 ， 它 的 layout、paint 方 法 是 Render 树 布局 、 泻 染 的 入 














RenderView 都 会 有 自己 的 RenderLayer， 如 果 开 启 了 加 速 合成 功能 ， 还 拥有 m_compositor 成 员 ; 它 的 m_frameview 成 员 代表 着 整个 文档 的 FrameView， 通 过 它 可 以 方便 地 访问 frame 相 关 的 信息 。 
此 外 ，RenderView 也 包含 选择 相关 的 成 员 m_selectionStart、m _selectionEnd。 


相关 代码 如 下 : 


[—RenderView.cpp) 





// 为 便于 理解 ， 对 原 代码 做 了 删 减 
Class RenderView : public RenderBlock { 
public: 
virtual void layout(); 
virtual void computeLogicalWidth|(); 
virtual void computeLogicalHeight (); 
virtual void computePreferredLogicalWidths(); 
int viewHeight() const; 
int viewWidth() const; 
int viewLogicalWidth() const; 
int viewLogicalHeight() const; 
FrameView* frameView() const; 
virtual void repaintViewRectangle (const IntRect&, bool immediate = false); 
virtual void paint(PaintInfo&, int tx, int ty); 
protected: 
FrameView* m frameView; 
RenderObject* m selectionStart; 
RenderObject* m selectionEnd; 
int m selectionStartPos; 
int m selectionEndPos; 





6.Renderlnline 














Renderlnline 继 承 自 RenderBoxModelObject， 封 装 CSS 中 的 Inline 元 素 。 相 比 Block 级 元 素 的 布局 ，Inline 元 素 的 布局 要 更 复杂 ， 细 节 更 多 ， 需 要 处 理 自动 换行 等 各 种 情况 。 为 了 便于 处 理 Inline 布 
程 当中 的 各 种 复杂 情形 ，WebKit 定 义 了 类 lnlineBox 及 其 派生 类 ， 用 来 维护 Render Objects 与 每 一 行 之 间 的 对 应 关系 。 











al 


& 























相关 代码 如 下 : 


[—Renderlnline.cpp] 


class RenderInline : public RenderBoxModelObject { 
public:a 
virtual int marginLeft() const; 
virtual int marginRight() const; 
virtual int marginTop() const; 
virtual int marginBottom() const; 
InlineFlowBox* createAndAppendInlineFlowBox (); 
RenderLineBoxList* lineBoxes(); 
InlineFlowBox* firstLineBox() const; 
InlineFlowBox* lastLineBox() const; 
private: 
RenderObjectChildList* children() { return &m children; ] 
void splitInlines( DE 
void splitFlow(---); 
virtual void layout() { ASSERT NOT REACHED(); } 
virtual void paint(PaintInfo&, int tx, int ty); 
virtual bool requiresLayer() const ( http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text/... } 
RenderObjectChildList m children; T 
RenderLineBoxList m lineBoxes; 





HN 











RenderBox 和 InlineBox 类 层次 关系 图 如 图 6-4 所 示 。 





RenderlnlineBox 


-RenderlnlineBoxList m lineBoxes 











RenderlnlineBoxList 













InlineTextBox 
| | 
c— | 







EllipsisBox 


*InlineFlowBox m firstinlieBOox < 一 
| 0 0 0 ë 
[E ——3] 


*InlineFlowBox m lastlnlieBox 





RootlnlineBox SVGInlineTextBox 


图 6-4 RenderBox 和 InlineBox 类 层次 关系 图 


7.Renderstyle 

















RenderStyle 类 保存 的 是 CSS 解 析 结 果 ， 并 且 对 CSS 属 性 进行 分 类 (分 为 可 继承 属性 与 不 可 继承 属性 ) ， 并 定义 struct InheritedFlags, struct NonlnheritedFlags 专 门 保存 这 些 属性 。 可 继承 属性 有 书 
写 方式 、 文 本 方向 、 文 本 对 齐 等 ; 不 可 继承 有 浮动 属性 、 定 位 属性 、overflow 属 性 等 。Renderstyle 提 供 了 大 量 的 getter 和 settter 方 法 ， 方 便 访 问 和 设置 各 种 CSs 属 性 。 代 码 如 下 : 























[^RenderStyle.cpp] 





// 为 便于 理解 ， 对 原 代码 做 了 删 减 
class RenderStyle: public RefCounted<RenderStyle> { 
// non-inherited attributes 
DataRef«StyleBoxData» m box; 
DataRef«StyleVisualData» visual; 
DataRef«StyleBackgroundData» m background; 
DataRef«StyleSurroundData» surround; 
DataRef«StyleRareNonInheritedData? rareNonInheritedData; 
// inherited attributes 
DataRef«StyleRareInheritedData» rareInheritedData; 
DataRef«StyleInheritedData?» inherited; 
// inherited 
struct InheritedFlags ( 
http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text/ . . http: / /www.hzcourse.com/resource/readBook?path-/openresources/teac 
unsigned visibility : 2; T 
unsigned _cursor_style : 6; 
http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text/ . .http://www.hzcourse.com/resource/readBook?path=/openresources/teac 
) inherited flags; T 
// non-inherited 
struct NonInheritedFlags { 
http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text/ . .http://www.hzcourse.com/resource/readBook?path=/openresources/teac 
unsigned position : 2; // EPosition 
unsigned floating : 2; // EFloat 
http: / /www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text/. .http: / /www.hzcourse.com/resource/readBook?path-/openresources/teac 
) noninherited flags; 
EDisplay display() const ( http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text/... } 
Length logicalXXX() const (http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text/...) 
Length marginXXX() const ( http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text/... ] 
LengthBox paddingXXX() const { http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text/... } 
http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text/ . .http: / /www.hzcourse.com/resource/readBook?path-/openresources/teack 
void setDisplay(EDisplay v) ( http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text/... ) 
void setPosition(EPosition v) ( http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text/ . . http: / /www.hzcourse.com/resource/re 








8.RenderText 

















RenderText 是 对 网 页 Text 的 封装 ， 它 直接 继承 自 RenderObject， 并 提供 关于 文字 方面 的 处 理 功能 ， 如 显示 文字 、 行 高 计算 等 。 由 于 它 自身 的 定位 往往 由 字体 类 型 、RenderBlock、Renderlnline 父 对 
象 来 处 理 ， 因 此 它 不 需要 重 载 layout 方 法 。 由 于 文本 可 能 会 存在 跨越 多 行 、 字 体 样式 、 书 写 习 惯 等 问题 ，RenderText 经 常 和 InlineTextBox 配 合 一 起 用 ， 其 成 员 m_firstTextBox 和 m_lastTextBox 来 跟踪 跨行 
文本 。 

































































RenderText 也 派生 很 多 子 类 ， 类 层次 如 图 6-5 所 示 。 











*InlineTextBox* m firstTextBox 
*InlineTextBox* m lastTextBox 





RenderBR 


RenderQuote 








图 6-5 ”RenderText 类 的 层次 关系 











64 ”Render 树 创建 流程 代码 分 析 

















第 5 章 在 分 析 网 页 解析 时 对 Render 树 有 过 介绍 ， 这 里 从 代码 上 对 完整 的 建树 流程 分 析 一 遍 。 希 望 通过 这 样 的 过 程 ， 能 够 加 深 读 者 对 排版 布局 的 认识 。 当 新 的 Node 节 点 要 加 入 DOM 树 时 会 调 


Element:attach 方 法 ， 我 们 就 从 这 个 方法 开始 分 析 Render 树 的 创建 过 程 。 




















Element::attach 方 法 委托 createRendererlfNeeded 方 法 来 申请 创建 Render 对 象 ， 由 于 Element 继 承 自 Node， 因 此 createRendererlfNeeded 方 法 实际 是 Node::create-RendererlfNeeded 方 法 , 代 











码 如 下 : 


[^Element.cpp] 


// 为 便于 理解 ， 对 原 代码 做 了 删 减 
void Element::attach() ( 
http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text./ . . http: / /www.hzcourse.com/resource/readBook?path-/openresources/teach ek 


createRendererlfNeeded(); // 申请 创建 Render 





















































Node::createRendererlfNeeded 人 方法 首先 会 做 一 些 条 件 处 理 ， 如 果 条 件 不 合适 则 直接 返回 ， 只 有 条 件 合适 才 会 调用 createRendererAndStyle 方 法 完成 剩 下 的 工作 ;Render 节 点 创建 后 接着 调 上 

















RenderObject:addChild 方 法 将 新 创建 的 Render 节 点 插入 Render 树 ， 代 码 如 下 : 


[^Node.cpp] 


中 





// 为 便于 理解 ， 对 原 代码 做 了 删 减 
void Node::createRendererIfNeeded() ( 
if (!document() || !document () -»shouldCreateRenderers ()) 
return; 
1) 完成 Render 节 点 的 创建 
RenderObject* newRenderer = createRendererAndstyle(); 
http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15583/OEBPS/Text/. . http: / /www.hzcourse.com/resource/readBook?path-/openresources/ 
2) 将 新 创建 的 Render 节 点 插入 Render 树 
if (parentNode () && parentNode ()-»renderer()) 
parentNode ()-»renderer ()-»addChild (newRenderer, nextRenderer()); 


createRendererAndStyle 方 法 首先 为 这 个 DOM 节 点 创建 RenderStyle， 然 后 将 这 个 style 当 做 参数 传 入 createRenderer 方 法 ， 由 createRenderer 完 成 剩 下 的 工作 。createRenderer 是 虚 方 法 ，Element 


ERTILA A, REUT: 





// 为 便于 理解 ， 对 原 代码 做 了 删 减 
RenderObject* Node::createRendererAndStyle() ( 
http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text./ . . http: / /www.hzcourse.com/resource/readBook?path-/openresources/teach ek 


if (!shouldCreateRendererFor (this, parent)) 
return 0; 
RefPtr«RenderStyle» style = styleForRenderer(); 
RenderObject* newRenderer = createRenderer (document ()-»renderArena(), style.get()); 
http://www .hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text / . . http: / /www.hzcourse.com/resource/readBook?path-/openresources/teach ek 
return newRenderer; 


} 


Element::createRenderer 方 法 是 对 RenderObject::createObject 方 法 的 简单 封装 ， 真 正 的 创建 工作 由 工厂 方法 RenderObject::createObject 完 成 ， 代 码 如 下 : 


【一 RenderObject.cpp]】 


// 为 便于 理解 ， 对 原 代码 做 了 删 减 


RenderObject* Element::createRenderer (RenderArena* arena, RenderStyle* style) ( 

http://www .hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text./ . . http: / /www.hzcourse.com/resource/readBook?path-/openresources/teach ek 
return RenderObject::createObject(this, style); 

} 





RenderObject::createObject 根 据 display 创 建 不 同 的 Render 对 象 ， 代 码 如 下 : 


[^RenderObject.cpp] 





// 为 便于 理解 ， 对 原 代码 做 了 删 减 
RenderObject* RenderObject::createObject (Node* node, RenderStyle* style) ( 
Document* doc = node-»document () 7 
RenderArena* arena = doc-»renderArena(); 
http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text/. .http://www.hzcourse.com/resource/readBook?path-/openresources/teact. 
Switch (style-»display()) ( // 根据 CSS 的 display 属 性 创建 不 同 的 Render 对 象 
case NONE:return 0; // 对 于 display:none 节 点 ， 则 不 创建 Render 对 象 
case INLINE: 
return new (arena) RenderInline (node) 
case BLOCK: 
case INLINE BLOCK: 
case RUN IN: 
case COMPACT: 
return new (arena) RenderBlock (node); 
case LIST ITEM: 
return new (arena) RenderListItem (node); 
case TABLE: 
case INLINE TABLE: 
return new (arena) RenderTable (node); 
case BOX: 
case INLINE BOX: 
return new (arena) RenderFlexibleBox (node); 
} 


return 0 





至 此 ,创建 RenderObjet 和 将 RenderObjet 插 入 Render 树 的 代码 流程 均 分 析 完 成 。 


6.5 ”Layout 流 程 代 码 分 析 

















布局 的 两 个 主要 目标 : 计算 大 小 和 确定 位 置 ， 本 节 将 带 着 这 两 个 目标 从 代码 上 分 析 内 核 的 布局 流程 。 











当 HTML 文 档 接收 并 且 解 析 完 毕 后 ， 会 调用 主 视图 FrameView::layout() 方 法 ， 代 码 如 下 : 























WebCore::FrameView::layout(bool allowSubtree)  // 栈 顶 
ocument: : implicitClose () 
rameLoader::checkCallImplicitClose () 
'rameLoader::checkCompleted|() 
ramelLoader::finishedParsing() 

WebCore: : Document: : £finishedParsing() 
WebCore::HTMLParser::finished() 
HTMLTokenizer::end() 

ITMLTokenizer inish() 

ocument: : fáinishParsing() 

'rameLoader: :endIfNotLoadingMainResource () 














::finishedLoading() 
rameLoader::finishedLoading() 

::MainResourceLoader: :didFinishLoading() 
WebCore::ResourceLoader: :didFinishLoading (WebCore::ResourceHandle * h) 





6.6 ”绘制 流程 分 析 





布局 之 后 紧 接 着 就 是 绘制 了 ， 前 面 介 绍 layout 流 程 时 我 们 注意 到 layout 在 确定 自己 的 大 小 和 位 置 后 会 调用 repaintRectangle(repaintRect)， 我 们 就 从 这 个 方法 入 手 ， 分 析 绘 制 的 流程 。 

















RenderObject:repaintRectangle 方 法 会 根据 输入 参数 计算 最 终 的 绘制 区 域 ， 然 后 调用 RenderObject::repaintUsingContainer 方 法 ， 代 码 如 下 : 











// 为 便于 理解 ， 对 原 代码 做 了 删 减 

void RenderObject::repaintRectangle (const IntRect& r, bool immediate) ( 
// 首先 判断 当前 RenderObject 的 根 节点 是 否 为 RenderView 类 型 
// 如 果 不 是 则 直接 返回 
RenderView* view; 

if (lisRooted(&view)) return; 

// 如 果 RenderView 正 在 绘制 ， 也 直接 返回 
if (view->printing()) return; 

// 更 新 绘制 区 域 大 小 

IntRect dirtyRect (r); 
dirtyRect.move (view-»layoutDelta ()); 

RenderBoxModelObject* repaintContainer = containerForRepaint (); 
computeRectForRepaint (repaintContainer, dirtyRect); 
repaintUsingContainer (repaintContainer ? repaintContainer : view, 
dirtyRect, immediate); 

} 














RenderObject::repaintUsingContainer 方 法 也 比较 简单 ， 实 现 将 其 代码 精简 后 可 以 看 出 ， 实 际 上 是 转调 RenderView::repaintViewRectangle 方 法 ， 代 码 如 下 : 





// 为 便于 理解 ， 对 原 代码 做 了 删 减 
void RenderObject::repaintUsingContainer (RenderBoxModelObject* 
repaintContainer, const IntRect& r, bool immediate)( 
// 最 终 都 是 调用 到 RenderView: :repaintViewRectangle () 方法 
if (!repaintContainer) { 
view()-»repaintViewRectangle (r, immediate); 
return; 


http://www .hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text/... http://www.hzcourse.com/resource/readBook?path-/openresources/teach 
if (repaintContainer-»isRenderView()) 
toRenderView (repaintContainer)-»repaintViewRectangle (r, immediate); 


} 














RenderView::repaintViewRectangle 方 法 最 终 是 调用 FrameView::repaintContentRectang-le 方 法 ， 代 码 如 下 : 

















// 为 便于 理解 ， 对 原 代 码 做 了 删 减 
void RenderView::repaintViewRectangle (const IntRect& ur, bool immediate)( 


if (!shouldRepaint(ur)) return; 
// 只 分 析 当 前 RenderView 是 root View 的 情况 
// 其 他 情形 如 iframe 不 做 分 析 ， 可 以 参考 源码 
m frameView->repaintContentRectangle (ur, immediate); 


} 


FrameView::repaintContentRectangle 方 法 会 区 分 是 否 立 即 绘制 ， 如 果 是 则 调用 ScrollView::repaintContentRectangle， 否 则 只 是 把 要 会 在 的 区 域 [ 保 存在 一 个 名 为 m_repaintRects 的 数组 。 代 码 如 
T 





[^FrameView.java] 


// 为 便于 理解 ， 对 原 代码 做 了 删 减 
void FrameView::repaintContentRectangle (const IntRect& r, bool immediate){ 
// 如 果 不 是 立即 绘制 ， 则 将 参数 r 加 入 m repaintRects4t/n 
// 车 数量 达到 数组 的 最 大 值 ， 则 与 数组 第 一 个 区 域 合并 m_repaintRects[0] .unite 
// 然后 返回 
double delay = m deferringRepaints ? 0 : adjustedDeferredRepaintDelay (); 
if ( (m deferringRepaints || m deferredRepaintTimer.isActive() || delay) && !immediate) { 
IntRect paintRect - r; 
if (m repaintCount « cRepaintRectUnionThreshold) 
m repaintRects.append (paintRect); 
else 
m repaintRects[0].unite (paintRect); 
m repaintCounttt; 
return; 


} 
// 延 时 绘制 
if (!shouldUpdate (immediate) ) return; 
// 立即 绘制 
ScrollView::repaintContentRectangle (r, immediate); 





} 





ScrollView::repaintContentRectangle 调 用 platformRepaintContentRectangle 方 法 ， 代 码 如 下 : 





// 为 便于 理解 ， 对 原 代码 做 了 删 减 

void ScrollView::repaintContentRectangle (const IntRect& rect, bool now){ 
if (platformWidget ()) 

platformRepaintContentRectangle (paintRect, now); 

} 





对 于 Android 系 统 ，ScrollView::platformRepaintContentRectangle 方 法 实现 代码 如 下 ， 主 要 是 转调 andrid::WebViewCore::contentlnvalidate 方 法 。 





// 为 方便 介绍 ， 代 码 有 精简 

void ScrollView::platformRepaintContentRectangle (const IntRect &rect, bool now)( 
android::WebViewCore* core = android: :WebViewCore::getWebViewCore (this); 
core-»contentInvalidate (rect); 

} 实 现代 码 在 webkit/android/jni/WebViewCore.cp 中 

// 为 方便 介绍 绘制 流程 ， 代 码 有 精简 

void WebViewCore::contentInvalidate (const WebCore::IntRect &r) ( 

IntRect dirty - r; 

m content.invalidate (dirty); 

if { !m skipContentDraw)contentDraw(); 


} 



































WebViewCore::contentDraw: 


实 是 一 个 JNI 调 用 ， 完 成 由 Native 层 到 Java 层 的 调用 。 代 码 如 下 : 























[^WebViewCore.cpp] 





// 为 便于 理解 ， 对 原 代码 做 了 删 减 
void WebViewCore::contentDraw() ( 
JNIEnv* env = JSC::Bindings::getJNIEnv(); 
AutoJObject javaObject = m javaGlue-»object (env) ; 
if (!javaObject.get()) return; 
env-»CallVoidMethod (javaObject.get(), m javaGlue-»m contentDraw); 
} 





下 面 这 部 分 代码 在 WebViewCorejava 中 ，contentDraw 实 际 是 发 送 异步 WEBKIT_DRAW 消 息 ， 而 EventHub.WEBKIT_DRAW 的 消息 处 理由 webkitDraw 方 法 完成 。 代 码 如 下 : 


[^WebViewCore.java] 





// 为 便于 理解 ， 对 原 代码 做 了 删 减 

void contentDraw() { 

mEventHub. sendMessage (Message.obtain (null, EventHub.WEBKIT DRAW)); 
} 














WebViewCore.java 的 webkitDraw 会 调用 native 方 法 触发 内 核 真 正 绘制 网 页 ， 接 着 调用 webkitDraw(DrawData draw) 发 送 NEW_PICTURE_MSG _ID 消 息 告 诉 WebView 网 页 有 内 容 更 新 。 代 码 如 下 : 








[^WebViewCore.java] 





// 为 便于 理解 ， 对 原 代码 做 了 删 减 
private void webkitDraw() { 
DrawData draw = new DrawData(); 
// 绘制 网 页 ， 生 存 picture 并 返回 baselayer 
draw.mBaseLayer = nativeRecordContent (mNativeClass, draw.mContentSize); 
webkitDraw(draw); // XiÉNEW PICTURE MSG _ ID 通知 WebView 绘 制 
} 
private void webkitDraw (DrawData draw) { 
Message.obtain (mWebViewClassic.mPrivateHandler, 
WebViewClassic.NEW PICTURE MSG ID, draw).sendToTarget (); 
} 





WebView.java 对 象 在 收 到 NEW_PICTURE_MSG _ID 后 ， 有 两 种 处 理 方式 : 

















1) 如 果 是 走软 件 绘制 ， 则 调用 WebView.invalidate 方 法 ， 触 发 Webview.OnDraw 方 法 调用 ， 最 终 调用 到 Webvew.cpp 的 draw 方 法 ; 






























































2) 如 果 是 走 硬件 绘制 ， 则 调用 nativeGetDrawGLFunction 方 法 ， 最 终 调用 到 Webvew.cpp 的 drawGL 方 法 ，drawGL 方 面 的 内 容 在 第 7 章 有 更 多 介绍 。 














接 下 来 重点 分 析 nativeRecordContent/recordContent 方 法 是 如 何 引 起 内 核 绘 制 的 ， 相 关 代码 在 WebViewCore.cpp 中 ， 流 程 如 下 : 











1) recordContent 调 用 recordPicturePile 方 法 ; 




















2) 而 recordPicturePile 方 法 实际 上 是 调用 PicturePile::updatePictureslfNeeded 方 法 ; 














3) updatePictureslfNeeded 方 法 通过 循环 会 对 每 一 块 dirty 区 域 调用 PicturePile::updatePicture 方 法 ; 














4) updatePicture 方 法 根据 dirty 区 域 的 大 小 构建 SkPicture 和 SkCanvas， 最 后 调用 paintContents 触 发 内 核 绘制 。 


相关 代码 如 下 : 


【一 WebViewCore.cpp 和 PicturePile.cpp]】 





// 为 便于 理解 ， 对 原 代码 做 了 删 减 

BaseLayerAndroid* WebViewCore::recordContent(SkIPoint* point) ( 
recordPicturePile(); // 该 方法 内 部 会 调用 updatePicturesIfNeeded 方 法 
BaseLayerAndroid* baseLayer = createBaseLayer (root); 

return baseLayer; 

} 

void PicturePile::updatePicturesIfNeeded (PicturePainter* painter){ 

applyWebkitInvals (); 

// 循环 绘制 各 个 dirty 区 域 

for (size t i = 0; i < m pile.size(); i++) { 

PictureContainer& pc = m pile[i]; 
if (pc.dirty) updatePicture (painter, pc); 





void PicturePile::updatePicture (PicturePainter* painter, PictureContainer& pc){ 
SkPicture* picture = new SkPicture(); 


SkCanvas* canvas = picture-^beginRecording (http://www .hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text/...); 


WebCore::PlatformGraphicsContextSkia pgc (canvas); 
WebCore::GraphicsContext gc(&pgc); 
// painter 实 际 上 是 WebViewCore 指 针 
painter->paintContents (&gc, drawArea); 
picture-»endRecording(); 


} 











PicturePainter 是 个 接口 类 ， 实 际 类 型 是 WebViewCore， 因 此 调用 painter 一 paintContents 方 法 实际 上 是 调 


[^WebViewCore.cpp:paintContents] 














WebViewCore::paintContents 方 法 。 代 码 如 下 : 





// 为 便于 理解 ， 对 原 代码 做 了 删 减 

void WebViewCore::paintContents (WebCore::GraphicsContext* gc ，… …) ( 
WebCore::FrameView* view = m mainFrame-»view(); 

view-»platformWidget()-»draw(gc, drawArea); 

} 











Android 平 台 的 platformWidget 是 WebCoreViewBridge 类 型 的 指针 而 WebCoreView-Bridge 是 一 个 抽象 类 ， 其 实现 类 是 WebFrameView， 因 此 platformWidget 的 draw 方 法 实际 上 是 


WebFrameView::draw 方 法 。 代 码 如 下 : 


[^WebFrameView.cpp:draw] 














// 绕 了 一 大 圈 ， 终 于 又 回 到 FrameView: :paintContents 
// 为 便于 理解 ， 对 原 代码 做 了 删 减 
void WebFrameView: :draw (WebCore: :GraphicsContext* gc，…) ( 
WebCore::Frame* frame = mFrameView-»frame|(); 
if (frame-»contentRenderer ()) 
mFrameView-»paintContents (gc, rect); // 又 看 到 熟悉 的 webcore 对 象 啦 
} 








FrameView::paintContents 首 先 做 了 很 多 准备 工作 ， 处 理 完毕 后 由 rootlayer 触 发 绘制 。 代 码 如 下 : 


【一 FrameView.cpp:paintContents】 


// 为 便于 理解 ， 对 原 代码 做 了 删 减 
void FrameView::paintContents (GraphicsContext* p, const IntRect& rect) ( 
m isPainting = true; 
RenderView* contentRenderer = frame ()-»contentRenderer () 7 
RenderLayer* rootLayer = contentRenderer-^layer(); 
rootLayer-»paint(p, rect, m paintBehavior, eltRenderer); 
m isPainting = false; T 


} 


void RenderLayer::paint (GraphicsContext* p, http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text/...) { 
http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text/... http://www.hzcourse.com/resource/readBook?path-/openresources/teach 


paintLayer(this, p, damageRect, paintBehavior, paintingRoot, &overlapTestRequests); 
} 


























至 此 ， 如 何 触发 内 核 绘 制 的 整个 流程 已 经 分 析 完 毕 ，paintLayer 会 逐 层 绘制 整个 网 页 ， 最 终 会 调用 到 RenderObject 及 


中 ,最 后 WebView 的 draw/darwGL 方 法 把 picture 显 示 到 屏幕 上 。 关 于 draw/darwGL 的 内 容 在 第 7 章 有 更 多 介绍 。 





67 本章 小 结 

















子 类 的 paint 方 法 。 生 成 的 picture 则 保存 在 LayerAndroid/BaseLayerAndroid 











本 章 首先 详细 介绍 了 CSS 的 框 模型 ， 框 模型 是 WebKit 解 析 CSS 布 局 的 基础 ，WebKit 中 Render 树 的 每 一 个 元 素 都 对 应 了 一 个 框 模型 ， 从 而 决定 了 其 自身 该 如 何 被 WebKit 演 染 ; 接着 从 代码 上 分 析 了 


Render 树 的 构建 过 程 ， 最 后 分 析 了 WebKit 的 layout、paint 整 体 流程 。 


第 7 章 ” 泻 染 与 硬件 加 速 


本 章 主要 内 容 





+ Android SurfaceFlinger 系 统 介绍 


- 回顾 WebKit 的 三 棵 树 





- Android WebKit 泻 染 过 程 


* Android WebKit 软 件 泻 染 与 硬件 泻 染 的 优 缺点 





第 5 章 已 经 介绍 了 WebkKit 的 架构 及 资源 加 载 ， 资 源 解析 ， 建 DOM 树 、Render 树 、RenderLayer 树 的 详细 过 程 。 本 章 将 介绍 WebKit 中 包含 的 网 页 信息 泻 染 到 物理 屏幕 上 的 详细 过 程 。 泻 染 过 程 是 由 集成 
了 WebkKit 的 具体 平台 实现 的 ， 不 同 平台 有 不 同 的 实现 方式 。Android 平 台 实 现 了 软件 泻 染 和 硬件 泻 染 两 种 方式 。 在 本 章 读者 将 看 到 Android 4.2 平 台 为 实现 WebKit 泻 染 所 构建 的 一 套 结构 ， 以 及 软 硬 件 泻 染 
的 具体 实现 流程 。 








7.1 Android SurfaceFlinger 系 统 介绍 





























浏览 器 作为 Android 系 统 的 一 个 应 用 程序 会 包含 一 个 或 多 个 图 形 界面 (surface) ，Android 系 统 的 图 形 界面 都 会 送 给 SurfaceFlinger 系 统合 成 并 输出 给 物理 屏幕 。 本 节 简单 介绍 下 SurfaceFlinger 系 统 
的 运行 原理 ， 这 里 只 关注 与 WebKit 演 染 合成 直接 相关 的 部 分 。 客 户 端 与 SurfaceFlinger 的 关系 可 简单 概括 为 图 7-1。 

































































- 客户 端 程序 请 求 SurfaceFlinger 创 建 一 个 Surface 用 于 绘 








* SurfaceFlinger 会 为 客户 端 Surface 创 建 一 个 SurfaceTexture 对 象 。 


Client SurfaceFlinger 


BufferQueue 


GraphicBuffer 


Surface -T------J---$/ SurfaceTexture GraphicBuffer 


GraphicBuffer 





图 7-1 Client SurfaceFlinger X & 


SurfaceTexture 是 客户 端 使 用 的 Surface 在 服务 端 SurfaceFlinger 中 的 对 应 对 象 。 一 个 SurfaceTexture 对 应 着 一 个 BufferQueue 对 象 。 一 个 BufferQueue 对 象 又 维护 着 一 组 图 形 缓冲 区 。 这 些 图 形 缓冲 区 是 
SurfaceFlinger 通 过 本 地 窗口 FramebufferNativeWindow 调 用 GPU 设备 分 配 的 。 客 户 端 最 终 就 是 在 这 些 图 形 缓冲 区 上 绘图 。 绘 制 好 的 图 形 缓冲 区 会 再 交 给 SurfaceFlinger 进 行 混 合 ， 并 最 终 上 屏 。 








软件 绘制 时 应 用 程序 申请 图 形 缓冲 区 的 入 口 是 : ViewRootImpl.java:drawSoftware() 中 调用 的 Surface::lockCanvas0 。 这 个 调用 会 触发 SurfaceFlingetr 系 统 中 与 这 个 客户 端 Surface 对 应 的 BufferQueue 出 列 一 块 
形 缓冲 区 。 























“ 软件 绘制 时 应 用 程序 归还 图 形 缓冲 区 的 入 口 是 : ViewRootImpljava::drawSoftware0 中 调用 的 Surface::unlockCanvasAndPost0 。 这 个 调用 将 应 用 程序 绘制 好 的 一 块 图 形 缓冲 区 归还 给 了 SurfaceFlingerf， 这 块 缓 
冲 区 会 重新 归 入 BufferQueue， 等 待 被 合成 。WebKit 硬 件 泻 染 通过 GPU 合成 网 页 各 层 ， 也 需要 使 用 图 形 缓 冲 区 。 硬 件 泻 当时 WebKit 向 SurfaceFlinger 申 请 图 形 缓冲 区 的 过 程 会 在 7.3.3 节 说 明 。 

















7.2 WebKit 的 三 棵 树 








第 5 章 讲解 了 WebKit 解 析 网 页 资源 ， 建 立 DOM 树 、Render 树 、RenderLayer 树 的 过 程 。 本 节 再 回顾 下 WebKit 存 储 网 页 信息 所 使 用 的 这 三 个 逻辑 结构 : 


























| DOM 树 ， 用 于 表示 文档 信息 ，HTML 文 档 中 的 元 素 都 以 Node 的 形式 关联 在 DOM 树 上 。 
“ Render 树 ， 用 于 表示 文档 的 可 视 信 息 ， 记 录 了 文档 中 每 个 可 视 元 素 的 布局 及 泻 染 方式 。 


“ RenderLayer 树 ， 以 层 为 树 节 点 组 织 文档 的 可 视 信 息 ，RenderLayer 树 可 以 看 作 Rendetr 树 的 稀疏 表示 ， 每 个 RenderLayer 树 的 节点 都 对 应 着 一 棵 Render 树 的 子 树 ， 这 棵 子 树 上 的 所 有 Render 节 点 都 在 网 页 的 同 
一 层 显示 。WebKit 解 析 文 档 信息 同时 创建 DOM 树 、Render 树 、RenderLayer 树 ， 这 三 棵 树 是 同步 成 长 的 。WebKit 泻 染 时 遍历 的 是 RenderLayer 树 ， 一 层 网 页 内 容 记 录 在 一 个 PicturePile 结 构 中 ， 遍 历 RenderLayer 
树 ， 实 际 上 就 是 遍历 了 Render 树 。 下 面 再 回顾 一 下 RenderLayer 树 中 创建 新 节点 的 条 件 : 


- 网 页 的 root 节 点 ; 

- 有 显 式 的 CSS position 属 性 (relative, absolute, transform) ; 

: 元素 是 透明 的 ; 

. 节点 有 溢出 (overlow) 、alpha mask 或 者 反射 (reflection) 效果 ; 
: 有 css filter. ( 滤 镜 ) 属性 ; 

- 2D Canvas 或 者 WebGL; 


* Video 元 素 。 

















在 开启 合成 加 速 的 情况 下 ，RenderLayer 树 的 每 个 节点 都 会 对 应 一 个 独立 的 后 端 存储 。WebKit 提 供 了 GraphicsLayer 类 ， 用 来 抽象 由 具体 平台 实现 的 后 端 存储 。 平 台 层 要 实现 GraphicsLayer 
类 ，Android 平 台 提供 的 后 端 存 储 实 现 类 是 GraphicsLayerAndroid。 




















7.3 Android WebKit 演 染 过 程 

在 此 先 对 Android WebKit 演 染 过 程 进行 一 个 整体 概述 。WebKit 的 演 染 是 指 平台 将 WebKit 保 存 的 网 页 内 容 输出 到 物理 屏幕 。 前 面 讲 过 演 染 过 程 在 不 同 平台 有 不 同 的 实现 。Android WebKit 的 泻 染 方式 
分 为 软件 泻 染 和 硬件 泻 染 ， 这 两 种 泻 染 方式 都 可 以 分 成 两 个 大 的 过 程 : 一 是 得 到 网 页 的 绘制 信息 ; 二 是 将 网 页 绘制 信息 转换 成 像素 并 上 屏 。 得 到 网 页 绘制 信息 的 过 程 需要 遍历 RenderLayer 树 ， 将 
RenderLayer 树 包含 的 网 页 绘制 信息 先 记录 下 来 ， 等 到 泻 染 时 使 用 。 记 录 网 页 绘制 信息 这 一 步 对 WebKit 而 言 ， 就 是 绘制 的 过 程 ，WebKit 本 身 并 不 知道 绘制 命令 是 否 有 被 真正 执行 。 下 面 将 概述 两 种 泻 染 方 
式 的 整体 流程 ， 详 细 流 程 会 在 7.3.2 节 和 7.3.3 节 给 出 。 

















软件 泻 染 的 流程 可 概括 为 以 下 三 步 : 





1) 从 SurfaceFlinger 获 得 一 块 图 形 缓冲 区 ; 














2) 在 封装 这 块 图 形 缓冲 区 的 SkCanvas 上 执行 网 页 绘制 命令 ; 














3) 将 绘制 好 的 图 形 缓冲 区 归还 SurfaceFlinger。 




















硬件 演 染 采用 分 块 泻 染 的 策略 ， 分 块 泻 染 是 指 : 网 页 内 容 被 一 组 Tile 覆 盖 ， 每 块 Tile 对 应 一 个 独立 的 后 端 存储 ， 当 网 页 内 容 更 新 时 ， 只 更 新 内 容 有 变化 的 Tile。 分 块 策略 可 以 做 到 局 部 更 新 ， 演 染 效 率 更 
高 。 硬 件 泻 染 策略 如 图 7-2 所 示 。 
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H7-2 ”硬件 泻 染 策略 


硬件 泻 染 的 过 程 分 为 以 下 5 步 : 


1) 在 一 块 封装 了 SkBitmap 的 SkCanvas 上 执行 一 个 Tile 覆 盖 的 网 页 信息 的 绘制 命令 ; 





2) 将 每 个 Tile 对 应 的 SkBitmap copy 到 从 SurfaceFlinger 获 得 的 一 块 图 形 缓冲 区 中 ; 














3) 将 所 有 Tile 对 应 的 图 形 缓冲 区 上 传 GPU 进 行 合成 ; 











4) 将 合成 好 的 网 页 内 容 blit 到 Tile 对 应 的 与 OnScreen FrameBuffer 相 关联 的 Texture; 
5) 通过 GPU 对 Tile 对 应 的 Texture 进 行 硬件 绘制 。 


接 下 来 的 三 小 节 内 容 就 是 对 记录 网 页 绘制 命令 、 软 件 演 染 和 硬件 泻 染 的 详细 剖析 。 


74 软件 泻 染 与 硬件 演 染 的 优 缺 点 
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软件 泻 染 实现 简单 ， 网 页 内 容 直 接 绘制 到 一 块 图 形 缓冲 区 上 ， 内 存 占 用 更 少 。 不 足 之 处 在 于 ， 由 于 网 页 内 容 绘制 在 同一 块 图 形 缓冲 区 上 ， 更 新 网 页 内 容 时 需要 全 部 更 新 ， 无 法 局 部 更 新 。 硬 件 泻 染 实现 
比较 复杂 ， 网 页 内 容 需 要 先 绘制 到 一 块 SkBitmap 上 ， 再 通过 图 形 缓冲 区 上 传 给 GPU， 相 对 于 软件 泻 染 ， 需 要 更 多 内 存 。 硬 件 泻 染 采 用 分 块 泻 染 策略 ， 网 页 内 容 更 新 时 可 以 做 到 局 部 更 新 ， 只 重 绘 内 容 有 变化 
的 部 分 ， 更 新 速度 更 快 。 
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本 章 介绍 了 Android 对 接 WebKit、 记 录 网 页 绘制 命令 、 软 件 泻 染 及 硬件 泻 染 的 具体 实现 原理 。 软 件 泻 染 是 直接 在 CPU 上 执行 网 页 绘制 命令 ， 网 页 内 容 被 绘制 在 系统 提供 的 图 形 缓冲 区 上 。 硬 件 泻 染 是 先 
在 CPU 上 执行 网 页 绘制 命令 ， 再 通过 GPU 合 成 并 绘制 网 页 内 容 。CPU 与 GPU 并 发 处 理 可 显著 提升 浏览 器 的 整体 泻 染 性 能 。 软 件 绘制 实现 简单 ， 内 存 占用 少 ， 但 网 页 更 新 时 需要 重 绘 所 有 网 页 内 容 ， 所 以 更 新 
速度 比较 慢 。 硬 件 绘制 实现 复杂 ， 内 存 占用 多 ， 但 可 以 做 到 局 部 更 新 网 页 内 容 ， 网 页 内 容 更 新 速度 较 快 。 





















































第 8 章 Android WebKit 框 架 


本 章 主要 内 容 





- Android 系 统 中 的 WebKit 框 架 介 绍 


- Android WebKit 框 架 实 现 解析 


- 基于 Android WebKit 的 浏览 器 实现 











第 5~7 章 介绍 了 Android 系 统 中 WebKit 网 页 加 载 、 排 版 布局 与 泻 染 绘制 的 原理 过 程 ， 本 章 则 要 描述 Android 系 统 是 如 何 把 WebKit 引 警 封装 进 Android Framework， 以 及 Android 系 统 中 的 WebView 
API 是 如 何 实现 的 。 


8.1 Android 系 统 中 的 WebkKit 框 架 介绍 




















Android 平 台 上 的 WebKit 是 Android Framework 的 重要 组 成 部 分 ， 主 要 用 于 提供 访问 HTML 页 面 的 WebView 及 其 相关 辅助 类 。Android WebKit 分 为 两 个 部 分 : Java 层 和 Native 层 ，Java 层 封装 了 
WebView API，Native 层 又 可 分 成 上 层 抽象 的 WebKit 模 块 和 下 层 的 WebCore 模 块 (排版 泻 染 引擎 ) 、V8 (Js 引擎 ) 和 Chromium-Net 模 块 (网络 引擎 ) 三 部 分 。Java 层 和 Native 层 通过 JNI 相 互 调用 。 如 
司 8-1 所 示 。 



























































Qua Java Native Interface (JNI) 是 Java 语 言 的 本 地 编程 接口 规范 ，JNI 使 得 Java 代 码 可 以 与 本 地 编程 语言 ( 即 C、C++ 或 汇编 语言 ) 编写 的 代码 进行 互相 访问 ， 即 Java 对 象 和 原生 语言 的 对 象 或 变量 可 
以 互 操作 。 


7 Java 
WebView API 


CT 
WebCore V8 Chromium Net 


8-1 Android WebKit 架 构图 




















本 节 先 概述 Android Framework， 再 依次 介绍 JNI 和 WebView API 的 具体 情况 。 


8.2 Android WebKit 框 架 实 现 解 析 


Android WebKit 框 架 源码 主要 分 布 在 frameworks 和 external 这 两 个 目录 下 : 
* external/webkit: Android WebKit 的 C++ 源码 ， 编 译 后 会 生成 libwebcore.so 库 ; 


* frameworks/base/core/java/android/webkit: Android Webview 的 Java 部 分 ， 提 供 WebView API， 供 浏览 器 应 用 程序 调用 。 





上 述 两 部 分 代码 分 别 对 应 C+ + WebKit 库 和 Java 层 APl 封 装 两 个 部 分 ，Java 层 负责 与 Android 应 用 程序 进行 通信 ， 而 C++ WebKit 库 负责 实际 的 网 页 排版 处 理 。Java 层 和 C 层 库 之 间 通 过 JNI 相 互 调用 ， 如 
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8-3 所 示 。 











WebViewCore.java 





User 
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WebView.cpp WebViewCore.cpp 








8-3 Android WebKit 组 成 图 











83 基于 Android WebKit 的 浏览 器 实现 


8.3.1 浏览 器 App 的 基本 功能 


Android WebView 类 已 经 





































































































































































































1) 多 窗口 浏览 ， 即 同时 打开 多 个 标签 页 或 多 个 窗口 浏览 不 同 页 面 。 

2) 多 媒体 浏览 ， 可 以 播放 网 页 中 的 HTML 5 音 视频 乃至 Flash 音 视频 资源 。 

3) 浏览 控制 ， 包 括 刷 新 、 停 止 、 前 进 后 退 、 缩 放 、 全 屏 等 功能 。 

4) 网 页 导航 ， 需 要 在 浏览 器 首 屏 中 提供 类 似 hao123 一 样 的 导航 页 。 

5) 书签 历史 ， 书 签 用 来 收藏 用 户 偏好 的 站 点 ， 历 史记 录 便 于 用 户 查 看 浏览 历史 。 
6) 资源 下 载 ， 当 链接 地 址 是 一 些 可 下 载 的 文件 时 ， 需 要 点 击 后 能 提供 下 载 功能 。 
7) 偏好 设置 ， 用 于 配置 一 些 用 户 偏好 的 选项 。 

其 他 一 些 更 高 级 但 也 是 常用 的 浏览 器 特性 还 有 : 

1) 自动 填充 : 在 网 页 表单 中 自动 填充 用 户 过 去 输入 并 保存 好 的 用 户 名 密码 。 






































2) URL 补 全 : 当 用 











3) 网 页 保存 以 及 
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本 章 首先 概述 了 Android Framework 的 整体 架构 ， 列 举 了 Android Framework 中 WebKit 组 件 的 核心 类 及 其 方法 ， 并 且 简 单 给 ! 
后 从 Java 和 Native 两 个 层次 详细 分 析 了 Android WebView API 的 源码 实现 ， 同 时 介绍 了 WebView 对 象 的 
介绍 了 Android 系 统 浏览 器 的 部 分 功能 代码 实现 ， 还 介绍 了 在 Android 系 统 中 定制 开发 WebKit 内 核实 现 


组 件 实现 打下 基础 。 然 





的 基本 功能 讲 起 ， 简 和 


本 章 主要 内 容 











页 截图 。 











“ 分析 V8 的 设计 原理 及 接口 调用 方法 


© 分析 WebKit 中 V8 绑 定 结构 及 实现 流程 


:分析 WebKit 中 扩展 JavaSctipt 的 方法 


-© 分析 WebSocket 规 范 在 WebKit 中 的 实现 流程 














户 输入 URL 片 段 时 自动 提示 完整 URL。 


第 9 章 











现 有 的 Web 应 上 











内 容 更 加 丰富 ， 对 上 











程 接口 的 基础 上 ， 详 细 讲解 对 WebKit 进 行 JavaScript 





9.1 V8 原理 及 接口 
9.1.1 V8 设计 元 素 


随 着 AJAX 的 兴起 以 及 大 型 Web 应 












































KB。JavaScript 引 擎 性 能 也 








就 浏览 器 这 个 特殊 应 


有 非常 重要 的 影响 。 





V8 是 Google 公 司 专 为 提升 大 型 JavaScript 应 
JavaScriptCore (Safari) 的 数 倍 (当然 各 种 浏览 器 

















益 成 为 JavaScript 应 | 


性 能 的 瓶颈 。 











来 说 ， 由 于 Web 页 面 往往 包含 大 量 的 JavaScript 代 码 ， 而 JavaScript 代 码 又 可 能 导致 DOM 树 的 创建 过 程 中 断 ， 





























执行 效率 而 设计 的 全 新 JavaScript 引 擎 ， 最 初 应 上 

















行 速度 ， 那 么 换 
显 。 原 因 主要 有 如 

















V8 可 能 显著 提升 应 
下 三 点 : 
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.属性 快速 访问 





确定 。 大 多 数 JavaScript 引 擎 采 

















的 性 能 。 至 了 





























象 属性 时 比 C、C++ 等 强 类 型 语言 慢 得 多 ， 因 为 C、 





访问 直接 转换 为 “起 始 地 址 + 偏 移 量 ”处 的 数据 访问 ， 而 无 需 任何 查找 。 经 过 编译 器 优化 后 





为 了 减 小 JavaScript 访 问 








属性 的 时 间 ，V8 放 弃 使 


的 JavaScript 引 擎 的 发 展 和 优化 是 时 刻 进行 的 ， 
性 能 提升 的 幅度 大 小 则 取决 于 JavaScript 源 码 本 身 ， 如 果 你 的 应 



































生存 期 以 及 相应 方法 调用 和 
有 特色 功能 浏览 应 


备 了 简单 的 网 页 加 载 和 实现 功能 ， 但 作为 一 个 浏览 器 ， 则 远 远 不 够 。 通 常 浏览 器 App 具 备 的 基本 功能 包括 : 


HH 了 JNI 编 程 的 基本 范例 ， 为 后 续 分 析 Android Framework 中 的 WebKit 

















事件 处 理 的 流程 。 最 后 从 一 个 浏览 器 App 应 具备 
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JavaScript 扩 展 接口 





户 交 互 体验 提出 了 更 高 的 需求 。 这 就 要 求 浏览 器 必须 能 够 提供 更 快 的 Jjavascript 执 行 效 率 和 更 灵活 的 接口 扩 
展 的 流程 ， 包 括 id| 文 件 撰写 、 绑 定 代码 生成 等 。 最 后 分 析 WebKit 如 何 利 


















































性 能 比较 数 











居 也 只 是 在 数 


























u 











哈 希 表 结构 (hash table) 来 存储 对 象 的 属性 ， 当 需 
C++ 等 语言 在 编译 时 对 象 的 内 存 布局 已 经 确定 ， 














即 对 象 属性 


变量 访问 操作 ， 通 常 只 有 一 两 条 指令 。 




















“字典 ” 式 的 Hash 表 结构 来 存储 









































展 机 制 。 本 章 在 介绍 V8 Javascriptl 警 的 设计 原理 和 编 











JavaScript 扩 展 来 实现 HTML 5 的 WebSocket 规 范 。 


的 出 现 ，JavaScript 已 成 为 Web 应 用 的 核心 技术 ， 如 Google 的 Gmail、Google maps, Google docs 等 。JavaScript 程 序 源码 的 大 小 也 从 几 行 几 十 行 增长 到 上 百 


因此 Javascript 引 警 的 代码 执行 效率 对 提高 渲染 引擎 的 解析 效率 也 





属性 ， 而 是 动态 地 创建 隐藏 类 。 当 类 的 属性 发 生 改 变 时 ， 对 应 的 隐藏 类 也 随 


Google Chrome。V8 执 行 代码 的 效率 是 JScript (IE) 、SpiderMonkey (Firefox) 、 和 
居 诞 生 的 那 一 段 时 间 有 意义 ) 。 如 果 你 的 Web 应 F 
中 大 量 存在 函数 多 次 重复 执行 的 场景 ， 那 么 性 能 的 提升 | 














的 性 能 瓶颈 是 JavaScript 的 执 
局 度 较 函数 只 执行 一 次 时 更 明 














JavaScript 是 一 门 动态 编程 语言 而 非 “ 强 类 型 ”语言 ， 其 对 象 不 但 没有 显 式 预定 义 的 类 型 ， 而 且 属 性 可 以 在 运行 过 程 中 添加 和 删除 。 也 就 是 说 ，JavaScript 对 象 的 属性 只 有 在 运行 时 被 访问 的 那 一 刻 才能 
访问 对 象 的 属性 时 ， 以 属性 名 称 字符 串 为 key 来 查找 索引 以 获取 属性 在 内 存 中 的 位 
的 “ 偏 移 量 ”编译 时 已 知 ， 同 时 编译 时 也 可 确定 哪 一 个 指针 会 包含 对 象 的 起 始 地 址 ， 故 属性 











。 这 就 使 得 JavaScript 在 访问 对 











变换 。 下 面 举例 来 详细 阅 述 V8 建立 隐藏 





类 和 隐藏 类 变换 的 过 程 ， 代 码 如 下 : 


【一 隐藏 类 示例 代码 】 





function Point(x, y){ 
this.x = x; 
this.y = y; 

} 








当 执 行 new Point(xy) 时 ，JavaScript 引 擎 会 创建 一 个 Point 对 象 。V8 第 一 次 创建 Point 对 象 时 ， 会 创建 一 个 初始 隐藏 类 : C0。 由 于 此 时 Point 对 象 还 没有 添加 任何 属性 ， 其 隐藏 类 就 为 C0。 如 图 9-1 所 





Point 对 象 


类 指针 





图 9-1 隐藏 类 C0 





执行 Point 的 第 一 条 语句 “this.x=x;” 会 为 Point 对 象 创建 一 个 新 属性 : x， 此 时 ，V8 执 行 如 下 两 步 : 








1) 基于 C0 创建 隐藏 类 C1， 然 后 向 C1 添加 属性 x 相关 的 信息 。 此 时 ，x 在 Point 对 象 存放 所 有 属性 的 区 段 中 的 偏 移 量 为 0。 




















2) 向 C0 中 添加 类 转换 信息 : 当 Point 对 象 添加 了 属性 x 后 ， 隐 藏 类 就 应 使 用 C1， 而 不 是 C0。 此 时 ，Point 对 象 的 隐藏 类 为 C1。 如 图 9-2 所 示 。 















Point 对 象 
类 指针 





初始 隐藏 类 C0 


如 果 添 加 属性 
x， 则 转换 到 类 
Cl 


图 9-2 ”隐藏 类 Cl 


同样 ,执行 “this.y=y;” 又 为 Point 对 象 创建 一 个 新 属性 : y， 此 时 ，V8 执 行 如 下 两 步 : 














1) 基于 C1 创建 隐藏 类 C2， 然 后 向 C2 中 添加 属性 y 的 相关 信息 。 此 时 ，y 在 Point 对 象 中 存放 所 有 属性 的 区 段 中 的 偏 移 量 为 1。 

















2) 向 C1 中 添加 类 转换 信息 : 当 Point 对 象 添加 了 属性 y 后 ， 隐 藏 类 就 应 使 用 C2， 而 不 是 C1。 此 时 ，Point 对 象 的 隐藏 类 为 C2。 如 图 9-3 所 示 。 

















如 果 添 加 属性 


, | 到 
初始 隐藏 类 C0 d MS 


A Rs n e E 





x， 则 转换 到 类 
Cl 





图 9-3 隐藏 类 C2 














每 当 Point 对 象 添加 一 个 属性 时 ， 就 创建 一 个 新 的 隐藏 类 ， 看 似 降低 了 执行 效率 。 但 注意 到 ， 隐 藏 类 可 根据 转换 信息 实现 复 用 。 当 下 一 次 执行 new Point 时 ， 不 会 创建 任何 的 隐藏 类 ， 而 是 与 第 一 次 创建 
的 Point 对 象 共享 隐藏 类 。 例 如 ， 当 另 一 个 Point 对 象 被 创建 时 ，V8 进 行 以 下 处 理 : 























1) 初始 时 ，Point 对 象 没有 任何 属性 。 因 此 ， 此 时 Point 对 象 的 隐藏 类 为 C0。 











2) 当 添 加 属性 x 后 ，V8 将 Point 对 象 的 隐藏 类 从 C0 变 为 C1， 并 将 x 写 到 C1 所 指示 的 偏 移 量 处 。 








3) 当 添 加 属性 y 后 ，V8 将 Point 对 象 的 隐藏 类 从 C1 变 为 C2， 并 将 y 写 到 C2 所 执行 的 偏 移 量 处 。 
































使 用 上 述 方法 ， 包 含 循环 或 重复 代码 的 Javascript 程 序 在 运行 时 ， 隐 藏 类 结构 体 被 高 度 共享 ， 显 著 提 升 了 代码 的 执行 速度 。 使 用 隐藏 类 给 javaScript 对 象 提供 了 运行 时 “ 伪 强 类 型 ”特征 ， 有 两 大 关键 好 








1) 访问 属性 通过 类 似 “ 强 类 型 ”语言 的 偏 移 量 方式 ， 无 需 查询 ; 











2) 隐藏 类 型 提供 了 对 象 的 “类 型 信息 ” ， 使 得 内 联 缓存 得 以 更 好 应 用 。 





Qs 隐藏 类 (hidden class) 又 称 为 Map， 描 述 了 对 象 的 大 小 以 及 属性 布局 等 信息 ，V8 的 对 象 中 有 专门 的 指针 指向 类 型 Map， 以 方便 运行 时 对 象 类 型 判断 和 属性 偏 移 量 的 获取 ， 对 象 的 Map 又 包含 了 指 
向 对 象 prototype 类 型 的 信息 ， 以 实现 原型 继承 。 此 处 不 再 展开 介绍 V8 的 对 和 象 模型 ， 有 兴趣 的 读者 可 以 自行 阅读 V8 代码 。 


2. 机 器 码 动态 生成 





首次 执行 JavaScript 代 码 时 ，V8 以 函数 为 单位 直接 将 源码 编译 成 机 器 码 ， 没 有 中 间 码 (比如 Java 有 中 间 表 示 bytecode， 而 V8 直接 从 抽象 语法 树 做 后 端 代码 生成 ， 没 有 中 间 表 示 ) ， 也 没有 解释 器 。V8 
的 JIT 分 两 级 ， 第 一 级 是 FullCodeGenerator， 其 作用 为 快速 从 抽象 语法 树 (AST) 生成 本 地 代码 ，FullCodeGenerator 对 生成 的 代码 优化 较 少 并 包含 延迟 编译 特性 ， 许 多 JavaScript 直 到 需要 运行 时 才 被 编 
译 ， 这 使 得 编译 引起 的 延迟 非常 得。 第 二 级 为 CrankShaft， 利 用 内 置 的 profile 工 具 寻 找 热点 函数 ， 并 对 热点 函数 进行 优化 。 































































































编译 生成 的 汇编 代码 ， 大 量 使 用 了 内 联 缓存 (inline cache) 来 实现 函数 和 对 象 属性 的 访问 。 内 联 缓存 同 C+ + 的 内 联 函数 类 似 ， 即 在 调用 语句 处 ， 展 开 cache 人 代码。 本质 上 是 在 未 确定 的 函数 调用 处 打 
桩 ， 即 将 函数 调用 操作 替换 成 特定 意图 的 stub。 打 桩 内 容 不 同 ， 应 用 场景 也 就 不 同 。inline cache 应 用 较为 广泛 ， 不 仅 应 用 于 动态 语言 的 属性 和 函数 分 发 ， 在 Java virtual 函 数 分 发 、 动 态 链接 库 的 lazy link 
以 及 调试 器 等 方面 也 有 应 用 。 











































































































V8 的 inline cache 在 实现 上 分 为 几 个 状态 ， 分 别 是 Uninitialized，Pre-monomorphic、Monomorphic 和 Megamorphic。 以 如 下 JavaScript 语 句 为 例 : 





obj.x = 1 














JavaScript 对 象 具有 高 度 的 动态 性 ， 直 到 具体 执行 的 时 刻 才能 确 知 obj 的 类 型 ， 进 而 得 到 x 的 地 址 ， 此 处 称 这 种 访问 操作 为 类 型 不 定 的 运行 时 对 象 的 属性 访问 操作 。 代 码 第 一 次 执行 时 ，V8 生 成 的 inline 
cache 的 打桩 代码 处 于 Uninitialized 状 态 ， 它 主要 执行 属性 地 址 的 动态 查询 操作 ， 查 询 完 毕 后 打桩 代码 被 改写 为 Pre-monomorphic 态 的 打桩 代码 。Pre-monomorphic 态 的 inine cache 也 是 通用 的 动态 查询 
操作 ， 其 代码 与 Uninitialized 状 态 的 打桩 代码 基本 一 致 。 之 所 以 有 两 个 状态 都 采用 相同 的 查询 操作 ， 是 因为 统计 发 现 许多 的 JavaScript 代 码 操 作 都 只 执行 一 次 ，Pre-monomorphic 态 的 inine cache 是 一 种 
































轻 量 的 、 不 经 优化 的 打桩 代码 ， 这 显然 会 节省 无 谓 的 优化 引起 的 时 间 消 耗 。Pre-monomorphic 态 的 inine cache 代 码 再 被 执行 时 ， 它 会 重 写 inline cache 代 码 到 Monomorphic 状 态 。Monomorphic 状 态 的 
inline cache 可 以 说 是 针对 特定 对 象 类 型 优化 的 缓存 ， 它 会 存储 该 特定 对 象 的 hidden class (或 称 Map) ， 以 加 速 查找 ， 形 式 如 下 : 


【一 Monomorphic inline cache 1IA32 平 台 示意 代码 】 





mov ebx ,0x01 
// 将 obj 的 起 始 地 址 放 入 eax 
mov eax, [esptoffset of obj] 
//Map 即 hidden class, 此 处 是 比较 obj 的 hidden class 与 已 经 缓存 的 类 型 是 否 一 致 
cmp [eax + map offset], «cached obj map» 
// 如 果 缓 存 失 效 ， 跳 转 到 执行 函数 LoadIC_ Miss 重新 查询 
jne miss 
// 如 果 缓 存 命中 ， 获 取 属 性 X 的 地 址 
mov eax, [eaxtoffset of x] 
// 立 即将 数 1 赋 值 给 obj .x 
mov [eax],ebx 
ret 
miss: 
Call LoadIC Miss 








上 述 代 码 只 是 示意 代码 ， 笔 者 没有 讨论 Javascript 对 象 在 V8 中 的 表示 结构 以 及 hidden class 的 结构 ， 所 以 上 述 代码 不 精确 ， 但 已 经 足够 反映 工作 原理 了 。 





Monomorphic 状 态 的 inline cache 在 遇 到 与 hidden class 类 型 不 符 的 其 他 类 型 对 象 的 访问 操作 时 ， 会 重 写 inline cache 到 Megamorphic 状 态 。Megamorphic 状 态 的 inline cache 形 式 上 像 是 多 个 
Monomorphic 状 态 inline cachefSi&n: 即 其 中 包含 多 种 类 型 的 hidden class 的 比较 ， 如 果 命 中 某 一 种 类 型 ， 则 获取 属性 偏 移 并 访问 ,一旦 内 联 缓存 失效 ， 跳 转 到 LoadIC_Miss 重 新 做 属性 查询 。V8 inline 
cache 的 实现 主要 位 于 src/ic 目 录 ， 有 兴趣 的 读者 可 以 阅读 其 代码 。 






























































经 过 上 述 分 析 可 知 ， 如 果 许 多 对 象 都 拥有 相同 的 隐藏 类 ， 机 器 码 动态 生成 的 inline cache 可 以 显著 提高 属性 和 函数 的 访问 效率 ， 从 而 极 大 地 提高 大 多 数 JavaScript 代 码 的 运行 速度 。 





3. 高 效 的 垃圾 回收 算法 
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垃圾 回收 机 制 使 得 V8 能 




















收 利用 对 象 不 再 使 用 的 内 存 。 垃 圾 回收 机 制 必须 保证 以 下 三 点 : 




















1) 对 象 能 被 快速 分 配 ; 
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A 





因 垃 圾 回收 而 导致 的 运行 中 断 时 间 短 ; 


3) 无 内 存 碎 片 。 




















V8 采 用 了 精确 的 分 代 内 存 管理 策略 ， 将 虚拟 机 的 堆 分 成 新 生 代 (young generation) 和 老年 代 (old generation) 。 新 生 代 是 创建 对 象 时 申请 内 存 空间 的 地 方 ， 整 体 尺寸 较 小 〈 一 般 为 1~8MB) , X 





















































年 代 。 老 年 代 的 垃圾 收集 主要 采用 标记 -清除 算法 和 标记 -紧缩 算法 。 另 外 ，V8 的 垃圾 收集 算法 仍然 在 不 断 地 演进 ， 除 了 前 面 介绍 的 几 种 经 典 的 垃圾 收集 算法 外 ， 还 引入 了 新 的 优化 算法 ， 比 如 为 缩短 标记 - 清 
除 算 法 和 标记 -紧缩 算法 引起 的 停顿 时 间 ， 引 入 了 增 量 标记 和 延迟 清除 算法 ， 还 有 一 些 测试 中 的 多 线程 并 行 回收 算法 等 。 











得 益 于 属性 快速 访问 、 机 器 码 动态 生成 和 垃圾 高 效 回收 三 大 机 制 ，V8 执 行 JavaScript 代 码 的 效率 获得 了 极 大 提升 。 


9.2 WebkKit JavaScript 接 口 


9.2.1 V8 binding 作 用 及 结构 

















V8 binding 的 作用 是 将 DOM 或 CSS 对 象 及 对 象 中 的 方法 通过 接口 的 方式 暴露 给 V8 引擎 ， 从 而 供 JavaScript 代 码 操作 。V8 binding 在 浏览 器 中 的 位 置 如 图 9-6 所 示 。 








Brower Shell 


WebKit API 


V8 bingind 


WebCore 











图 9-6 V8 binding 结 构 框 图 




















Browser Shel 与 WebKit API 交 互 ， 此 处 的 WebKit API 主 要 指 WebKit 目 录 下 的 接口 函数 ， 包 含 是 否 人 允许 JS 执 行 的 接口 。WebCore 中 的 DOM 元 素 、CSS 规 则 等 会 通过 V8 binding 将 操作 接口 暴露 给 























V8。 这 样 网 页 中 包含 的 JS 代码 就 可 以 操作 DOM 或 CSS 了 。 


DOM 元 素 、CSS 规 则 等 的 操作 接 




















9.3 HTML 5 扩展 实例 


95.1 


header 信 息 长 度 ， 也 减少 了 客户 端 与 服务 器 端 建立 的 TCP 连 接 数 (通常 只 需 一 个 TCP 连 接 ) ， 从 而 显著 提高 了 Web 应 


Websocket 是 HTML 5 标准 定义 的 新 规范 之 一 ， 实 现 了 浏览 器 与 服务 器 全 双 工 通信 。WebSocket 之 前 
秒 ) ， 由 浏览 器 对 服务 器 发 出 HTTP 请 求 ， 然 后 由 服务 器 返回 
器 。 这 两 种 传统 HTTP 通 信 的 模式 
服务 器 。 加 之 HTTP 协 议 头 较 长 ， 


使 


WebSocket 暴 露 给 JavaScript 的 接 














WebSocket 概 述 








最 新 的 数据 给 客户 端的 浏览 器 。 另 一 种 是 在 沪 


的 Web 应 上 
览 器 跟 服务 器 之 间 维持 一 个 HTTP 活 跃 长 连接 ， 每 当 服 务 器 端 数据 有 更 新 ， 服 务 器 主动 push 给 浏览 


是 通过 Web 1DL 语 言 来 定义 的 ， 如 在 WebCore 的 DOM、CSS、HTML 等 目录 的 代码 中 ， 有 很 多 以 id| 为 后 缀 的 文件 ， 这 些 文件 中 定义 了 暴露 给 V8 的 接口 。 





























要 实现 即时 通信 ， 主 要 有 两 种 实现 方式 ， 一 种 是 轮 询 ， 在 特定 的 时 间 间隔 (如 每 1 





























有 很 明显 的 缺点 ， 轮 询 方式 浏览 器 需要 不 断 地 向 服务 器 发 出 请 求 ， 占 | 
也 增加 了 通信 的 负担 。 























较 多 带宽 。 而 服务 器 主动 push 的 方式 ， 一 方面 要 维持 长 连接 ， 另 一 方面 需要 特定 的 支持 该 功能 的 




















Websocket 技 术 ， 浏 览 器 和 服务 器 只 需 一 次 握手 ， 将 HTTP 协 议 升级 到 Websocket 的 协议 ， 就 可 以 在 浏览 器 和 服务 器 之 间 建 立 一 条 数据 快速 传输 通道 ， 不 但 大 幅 减少 了 客户 端 与 服务 器 交换 的 














如 下 : 











[^WebSocket.idl] 

















的 实时 性 。 





interface [ 


CustomConstructFunction, 
ConstructorParameters-1, 
V8CustomConstructor, 
EventTarget 
]WebSocket { 
readonly attribute DOMString URL; 
readonly attribute DOMString url; 
// ready state 
const unsigned short CONNECTING - 0; 
const unsigned short OPEN - 1; 
const unsigned short CLOSED - 2; 
readonly attribute unsigned short readyState; 
readonly attribute unsigned long bufferedAmount; 
// networking 
attribute EventListener 
attribute EventListener 
attribute EventListener onerror; 
attribute EventListener onclose; 
[RequiresAllArguments] boolean send(in DOMString data) 
void close(); 
// EventTarget interface 
void addEventListener(in DOMString type, 
in EventListener listener, 
in boolean useCapture); 
void removeEventListener(in DOMString type, 
in EventListener listener, 
in boolean useCapture); 
boolean dispatchEvent (in Event evt) 
raises (EventException); 


onopen; 
onmessage; 


raises (DOMException); 






























































































































































ur| 为 服务 器 地 址 ，WebSocket 通 过 解析 该 地 址 直接 建立 到 服务 器 的 连接 。ProtocoI 为 通信 协议 类 型 ， 一 般 为 “ws” 或 “wss”。send 方 法 用 于 客户 端 向 服务 器 端 发 送 数据 。close 用 于 关闭 连接 。 接 
中 并 没有 提供 connect 方 法 ， 因 为 WebSocket 一 旦 建立 就 会 自动 调用 connect 建 立 连 接 。WebSocket 接 口 的 使 用 方式 的 示例 如 下 : 
【一 WebSocket 使 用 示例 】 
<script language="javascript" type="text/javascript"> 
var wsUri = "ws://echo.websocket.org/"; 
var output; 
function init () 
{ 
output = document.getElementById ("output"); 
testWebSocket () ; 
} 
function testWebSocket() { 
websocket = new WebSocket (wsUri); 
websocket.onopen = function(evt) { onOpen(evt) }; 
websocket.onclose = function(evt) ( onClose(evt) ); 
function onOpen (evt) 
{ 
writeToScreen ("CONNECTED"); 
doSend("WebSocket rocks"); 
function onClose (evt) 
{ 
writeToScreen ("DISCONNECTED"); 
function doSend (message) { writeToScreen("SENT: " + message); websocket.send (message); ) 
function writeToScreen (message) 
{ 
var pre = document.createElement ("p"); 
pre.style.wordWrap = "break-word"; 
pre.innerHTML = message; output.appendChild (pre); 
</script> 
NES 
94 ”本 章 小 结 
本 章 首先 详细 介绍 了 Chrome 的 V8 JavaScript 引 擎 。V8 作 为 一 门 动态 语言 的 编译 和 执行 引擎 ， 表 现 出 了 极为 出 色 的 性 能 ， 这 主要 得 益 于 V8 的 几 大 设计 理念 ， 如 属性 快速 访问 、 机 器 码 动态 生成 等 。 其 次 


详细 介绍 了 在 WebKit 中 如 何 扩展 JavaScript 接 口 ， 主 





















































包括 id| 文 件 撰写 、 绑 定 代码 的 自动 生成 与 定制 等 。 最 后 ， 在 了 解 JavaScript 扩 展 的 基础 知识 之 上 ， 讲 述 了 WebkKit 如 何 实现 HTML 5 的 WebSocket 规 


第 10 章 ”WebKit 的 插件 系统 


本 章 主要 内 容 
> 介绍 NPAPI 持 件 、 系 统 架构 、 加 载 流程 
“ 分 析 WebKit 的 插件 模块 及 插件 与 脚本 的 交互 


- 分 析 Android 插 件 AP 区 化 及 其 参考 范例 


在 日 常 工 作 和 生活 中 浏览 器 是 使 用 频 度 非常 高 的 应 用 ， 对 于 追求 便捷 体验 的 用 户 ， 大 量 的 扩展 插件 是 必 备 的 。 图 10-1 是 Chrome 浏 览 器 插件 的 截图 ， 插 件 不 仅 可 以 展示 丰富 的 内 容 ， 而 且 还 可 以 帮助 我 








们 管理 浏览 器 ， 甚 至 玩 游戏 以 及 辅助 各 种 开发 调试 等 。 那 么 浏览 器 是 怎样 支持 插件 的 呢 ?》 本章 中 我 们 将 一 起 分 析 WebKit 的 插件 系统 。 

















Chrome Connectivity Diagnostics — 1.1.3 
详细 信息 

ID : eemlkeanncmjljgehibplemhmdmalhdc 
检查 视图 : ”背景 页 ( 无 效 ) 


D 在 隐身 模式 下 启用 


Cutthe Rope 16 


Cut the Rope, catch a star, and feed Om Nom candy in this award-wi 


详细 信息 
ID: gkddaofiamhgfjmaccfcfpfolpgbeomj 


国 在 隐身 模式 下 启用 


DHC - REST/HTTP API Client — 0.8.1.1 


nning game! 


REST & HTTP API developer's pocket knife. Easy to use and configurable. HATEOAS, 


Hypermedia, Requests History * Repository, and more. 
详细 信息 ”选项 


ID : aejoelaoggembcahagimdiliamlcdmfm 
D 在 隐身 模式 下 启用 国 允许 访问 文件 网 址 


图 10-1 浏览 器 插件 


10.1 ”NPAPI 插 件 概述 


10.1.1 浏览 器 插件 功能 作用 





在 HTML 5 的 众多 扩展 接口 诞生 之 前 ， 浏 览 器 支持 的 数据 资源 类 型 是 相对 单薄 的 。 在 B/S 架 构 被 广泛 应 用 的 大 背景 下 ， 作 为 入 口 的 浏览 器 ， 要 承担 起 一 个 通用 、 便 所 
能 多 的 数据 格式 ， 尤 其 是 多 媒体 资源 。 浏 览 器 插件 是 扩展 浏览 器 功能 的 主要 手段 ， 在 多 媒体 展示 需求 的 强力 驱动 下 ， 浏 览 器 插件 大 展 身手 ， 比 如 我 们 熟知 的 Flash 插 件 、 
件 、RealPlayer 插 件 等 ， 几 平 在 每 一 个 浏览 器 中 都 是 必 备 的 。 


浏览 器 插件 是 一 种 嵌入 在 网 页 中 的 应 用 程序 ， 作 为 浏览 器 的 扩展 ， 向 用 户 提供 丰富 的 网 页 扩展 功能 。 通 过 插件 可 以 做 到 : 
- 展示 某 些 MIME 类 型 的 资源 。 
: 将 资源 的 内 容 绘制 到 页 面 的 菜 个 区 域 或 绘制 成 独立 的 页 面 。 
: 能够 与 用 户 的 输入 进行 交互 。 


“ 通过 JavaScript 脚 本 来 访问 和 控制 插件 的 行为 。 





的 资源 展示 平台 的 任务 ， 并 支持 尽 可 
Adobe Reader 插 件 、Quicktime 插 





简 而 言 之 ,插件 使 得 原本 只 有 借助 独立 App 才 能 展示 或 处 理 的 内 容 在 浏览 器 的 页 


插件 是 浏览 器 中 相对 独立 的 一 个 功能 模块 ， 是 为 了 功能 扩展 而 专门 设计 的 。 需 要 指出 的 是 ,插件 往往 是 以 共享 库 的 形式 存在 ， 要 依附 浏览 器 才能 执行 其 功能 ， 


























平台 指 硬件 和 操作 系统 平台 ， 








因为 插件 要 借助 平台 的 底层 接口 来 展示 资源 ) ， 同 时 也 是 浏览 器 相关 的 (其 存在 形式 、 接 口 











义 展现 和 处 理 ， 大 大 增强 了 浏览 器 的 功能 。 





不 能 独立 运行 。 揪 件 是 平台 相关 的 (此 处 





、 加 载 方 式 等 都 是 由 其 依附 的 浏览 器 决定 的 ) 。|E 浏 览 器 支持 的 插件 是 基于 COM 体 





系 的 ActiveX 控 件 。 而 Gecko 引 警 的 Fixfox 和 WebKit 引 警 的 Safari 和 Chrome 等 都 支持 NPAPI 接 口 。 


10.2 WebKit 的 插件 系统 








有 过 插件 系统 设计 经 验 的 读者 应 该 了 解 ， 对 于 应 
共享 库 、COM 组 件 等 。 有 一 些 基本 的 功能 是 必需 的 ， 比 如 : 











“ 共享 库 的 加 载 及 动态 链接 。 


“ 共享 库 的 管理 ， 以 及 为 了 生命 周期 管理 而 引入 的 引用 计数 等 。 


“ 事件 的 分 发 及 UI 交互 等 。 








对 于 浏览 器 这 个 有 内 置 脚本 的 特殊 应 














10.3 ”Android 平 台 播 件 开发 


10.3.1 ”新 增 特 有 接口 


Google 在 Android 的 浏览 器 上 实现 了 ANPlnterface (一 系列 的 操作 接 | 
ANPXXXInterface， 并 在 运行 过 程 中 使 用 。 























下 面 就 我 所 知道 的 情况 来 说 明 这 些 接口 都 提供 了 的 操作 ， 见 表 10-1。 

















系统 甚至 操作 系统 内 核 ， 要 提供 对 插件 (或 称 可 动态 加 载 模块 ) 的 完善 支持 需要 做 大 量 的 工作 ， 比 如 大 家 熟知 的 Linux Kernel 中 的 ko 模块 、 应 























系统 ， 还 多 了 一 项 : 与 脚本 互 操作 的 需求 。 本 节 笔 者 将 与 读者 一 起 分 析 一 下 WebKit 是 如 何 实现 这 些 基本 需求 进而 支持 NPAPI 的 。 


或 者 函数 ) ， 这 些 在 NPAPI 上 没有 的 接口 ， 弥 补 了 NPAPI 在 Android 上 的 不 足 。 插 件 可 以 在 初始 化 时 获取 这 些 


表 10-1 ANPInterface 说 明 












































ANPInterface NPN GetValue 传人 的 NPNVariable 说 明 
LogInterface kLogInterfaceV0 ANPGetValue 日 志 接 口 
dioTrackInterface kAudioTrackInterfaceV0 ANPGetValue 音频 接口 
CanvasInterface kCanvasInterfaceV0. ANPGetValue Canvas 绘制 接口 
MatrixInterface kMatrixInterfaceV0 ANPGetValue 年 阵 接口 ， 绘 制 辅助 
PaintInterface kPaintInterfaceV0. ANPGetValue 画笔 接口 ， 绘 制 辅助 
PathInterface kPathInterfaceV0 ANPGetValue 路 径 接口 ， 绘 制 辅助 
ypefaceInterface kTypefaceInterfaceV0 ANPGetValue 字体 接口 ， 绘 制 辅助 
WindowlInterface kWindowInterfaceV0 ANPGetValue 窗口 控制 接口 
BitmapInterface kBitmapInterfaceV0 ANPGetValue 提供 Bitmap 格式 索引 
SurfaceInterface kSurfaceInterfaceV0 ANPGetValue Surface 控制 接口 
SystemInterface kSystemInterfaceV0 ANPGetValue 系统 接口 ， 提 供 程序 目录 和 Java 类 的 获取 
EventInterface kEventInterfaceV0 ANPGetValue 事件 接口 ， 提 供 消 息 队 列 功能 








WebKit 的 源码 中 有 ANPlnterface 相 关 实 现 ， 其 中 大 部 分 代码 都 可 以 直接 搬 到 加 载 器 中 使 



































WebKit， 因 此 需要 





10.4 ”本 章 小 结 























， 只 有 Windowlnterface、Systemlnterface 和 Eventlnterface， 这 三 类 接 











的 原版 代码 实现 依赖 于 














本 章 为 读者 详细 介绍 了 NPAPI 插 件 标准 、 系 统 架 构 等 内 容 。 在 此 基础 之 上 ， 进 一 步 分 析 了 WebkKit 的 插件 模块 及 插件 与 脚本 的 交互 ， 最 后 介绍 了 Android 揪 件 的 APK 化 。 同 时 笔者 以 源码 为 例 ， 为 读者 分 





析 揪 件 加 载 流程 的 实现 细节 ， 帮 助 读者 完整 透彻 地 理解 其 内 容 ， 这 对 插件 开发 者 也 是 非常 有 益 的 。NPAPI 插 件 在 将 来 也 许 会 被 废弃 ， 但 其 中 体现 的 插件 设计 方法 是 非常 值得 借鉴 的 ， 毕 竟 学 以 致 F 


目的 。 
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浏览 器 调试 工具 








才 是 根本 











本 章 主要 内 容 
+ WebKit Inspector 概 述 
* WebKit Inspector 协 议 
* Remote Inspector 代 码 分 析 


' JavaScript 调 试 











本 章 将 探讨 WebKit 引 警 中 浏览 器 调试 工具 的 设计 及 实现 ， 相 信 读 者 对 浏览 器 的 调试 工具 一 定 不 会 陌生 ， 尤 其 对 前 端 开发 者 而 言 ， 可 谓 尖 兵 利器 ， 它 一 方面 可 以 帮助 开发 者 观察 页 面 的 展现 、 调 试 页 面 的 
效果 ， 甚 至 动态 改变 浏览 器 的 运行 状态 ， 另 一 方面 也 可 以 为 开发 者 提供 性 能 分 析 的 准确 数据 ， 比 如 页 面 中 各 种 资源 的 加 载 时 间 、 页 面 演 染 时 间 、 资 源 消耗 等 。 





11.1 Inspector 概 述 











图 11-1 是 Chrome 调 试 工具 的 示例 ， 图 片 顶部 为 被 调试 的 页 面 ， 底 部 为 调试 器 ( 即 Inspector) 的 前 端 。 调 试 器 的 前 端 提供 了 多 个 面板 ， 比 如 Elements、NetWork、Sources、Timeline、Console 等 。 
调试 器 的 后 端 在 WebKit 引 擎 中 正 是 WebKit Inspector， 它 支撑 起 了 前 端的 各 种 方便 、 炫 酷 的 调试 行为 。 在 WebkKit 代 码 中 许多 地 方 都 可 以 看 见 Inspector 的 身影 ， 像 一 个 个 嗅 探 浏览 器 运行 状态 的 密探 ， 分 散 
在 WebKit 引 警 的 各 个 部 分 ， 我 们 将 Inspector 协 议 嗅 探 到 的 消息 发 给 前 端 展示 窗口 ， 同 时 接收 前 端 展示 窗口 发 来 的 各 种 命令 ， 并 根据 命令 对 浏览 器 的 运行 状态 做 出 调整 。 


Google 
































v 
Google 搜索 手气 不 错 
qa 日 | Elements | Network Sources Timeline Profiles Resources Audits Console » 2 D, 
DOCTYPE html [Styles | Computed Event Listeners > 
W «html itemscope itemtype-"http://schema.org/WebPage" lang="zh-CN"> T^ 
P «heu. C/hendy element.style ( + EE 
¥ «body class-"hp" onload-"try(if(!google.j.b)(document.f&&document.f.q.focus(); } 
document .gbqf&&document .gbqf.q.focus();}}catch(e){}if(document.images)new Image().src-'/images/ body, html { 3gfe rd=cr&ei=E.L8Qet8ID4BA:11 
nav logoi95.png'" alink-"£dd4b39" bgcolor="#fff" id-"gsr" link="#12c" text="#222" vlink="#61c"> font-size: small; 


b «div class-"ctr-p" id="viewport">.</div> 
«script src-"/xjs/ /is/k=xis.s.zh CN.1nWd2VnCLic.0/m-sy26,abd,sy64,sy63,sy65,async,..-hEj9FoOgLKgTiDo/rt-i/ 
d-0/t-zcms/rs-ACT900E6T527jAyiYBUN3lzmxVdah8pIfw"»«/script» 

b «style type-"text/css"5.«/style» 

> «div class-"jfk-bubble chw-oc" style="display: none;"»..«/div» 
«script src-"//ssl.gstatic.com/gb/js/smm 8bfa20570128316f03757ffdd3aa8470.js" async»«/script» } — — 
«script src-"//ssl.gstatic.com/gb/js/abc/gci 91f30755d6a6b787dcc2a4062e6e9824.js" async gapi processed- body, td, a, p, ?gfe rdecr&ei-E..L8Qet8ID4BA:11 








body ( gfe rdscr&ei-E..L8Qet8IDA4BA:11 
background: > [ ]tfff; 
color: 国 #222; 


























"true"»«/script» ht 
«/body» font-family: arial,sans-serif; 
</html> } 





html, body { 2gfe rd=cr&ei=E..L8Qet8ID4BA:11 
height: 100%; 
margin: >60; 

} 





background—celori—| |Pgb(255,—255,—255)4 
cotor Mi egb(34, 34,34); 
} 


body { user agent stylesheet 
display: block; 
vem 





} 
Inherited from html 
body, html ( 3gfe rd-cr&ei-E..L8Qet81D4BA:11 
html. ud Find in Styles 


























图 11-1 Chrome Devtools 示 例 




















WebKit 提 供 对 Inspector 的 完全 支持 ， 尤 其 对 Remote Inspector 的 支持 是 近 几 年 的 事情 ， 它 随 着 HTML 5 的 发 展 而 发 展 、 成 熟 。WebKit Inspector 的 前 端 是 地 地 道道 的 Web 应 用 ， 即 它 全 部 由 HTML 
5、CSS3 和 Javascript 组 成 。 在 Web 应 用 市 场 尚未 成 熟 的 今天 ， 它 也 应 该 是 知名 度 最 高 的 Web 应 用 之 一 。 





























11.2 WebKit Inspector 协 议 








整体 上 WebKit Inspector 分 为 前 端 、 后 端 、 协 议 三 大 部 分 ， 前 端 部 分 为 使 用 浏览 器 调试 工具 时 看 到 的 前 端 页 面 。 后 端 部 分 包含 在 WebKit 引 擎 中 ， 除 了 WebCore/inspector 目 录 外 ， 还 有 分 散在 各 处 的 
Inspectorlnstrument 代 码 。 而 协议 部 分 则 是 两 者 的 交互 语言 和 通信 介质 。 




















对 比 GDB Remote， 后 端 部 分 的 作用 类 似 于 GDB Server， 是 具体 调试 、 跟 踪 行为 的 执行 者 ， 但 它 本 身 是 WebKit 引 警 的 一 部 分 ， 无 需 attach 到 浏览 器 (GDB Remote 调 试 代码 时 ，GDB Server 要 attach 
到 待 调 试 进程 ， 本 质 上 就 是 trace 待 调试 进程 ) 就 可 搜集 浏览 器 信息 、 改 变 浏览 器 行为 。 前 端 部 分 的 地 位 类 似 于 GDB Client， 可 查看 结果 并 发 送 命令 。 而 GDB Client 与 GDB Server 之 间 通 过 GDB Remote 协 
议 相 互通 信 ， 只 要 满足 协议 就 可 对 话 ， 不 论 什么 样 的 传输 介质 (比如 进程 间 IPC、 串 口 、 以 太 网 、USB 等 ) 。 以 Linux Kernel 的 调试 为 例 ，Linux Kernel 包 含 Kgdb 功 能 ， 主 要 实现 了 GDB 协 议 的 Server 端 ， 
所 以 开发 者 可 以 用 GSB Client (集成 于 GDB 工 具 中 ) 来 调试 Linux Kernel。 






































WebKit 的 前 端 和 后 端 是 否 也 有 对 应 的 通信 协议 呢 ? 有 了 通信 协议 是 否 可 以 出 现 多 种 调试 前 端 呢 ? 答案 是 肯定 的 ， 许 多 Web 开 发 的 IDE 中 的 调试 功能 就 是 实现 了 Inspector 的 Client 端 协议 。 








本 章 仍 以 Android 4.2 源 代码 为 蓝本 。 协 议 全 文 定义 于 WebCore/inspector/Inspectorjson。 整 个 协议 被 分 成 若干 个 域 (domain) ， 包 括 Inspector、Page、Runtime、Console、Network、 
Database、DOMStorage、ApplicationCache、DOM、CSS、Timeline、Debugger、Profile 等 。 域 的 结构 如 下 例 所 示 : 


【一 Network domain 示 例 】 


"domain": "Network", 
"description": "Network domain allows tracking network activities of the page. It exposes information about HTTP and WebSocket requests and responses, their headers, bc 
"types": [ 
{ 

"id": "ResourceTiming", 

"type": "object", 

"description": "Timing information for the request.", 

"properties": [ 





{ "name": "requestTime", "type": "number", "description": "Timing's requestTime is a baseline in seconds, while the other numbers are ticks in milliseconds 
{ "name": "proxyStart", "type": "number", "description": "Started resolving proxy." ], 
http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text./ . . http: / /www.hzcourse.com/resource/readBook?path-/or 
] 
u 
http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text/ . . http: / /www.hzcourse.com/resource/readBook?path-/openresourc 
J; 
"commands": [ 
{ 
"name": "enable", 
"description": "Enables network tracking, network events will now be delivered to the client." 
F; 
http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15583/0EBPS/Text/ . . http: / /www.hzcourse.com/resource/readBook?path-/openresourc 
l 
"events": [ 
{ 
"name": "domContentEventFired", 
"parameters": [ 
{ "name": "time", "type": "number" } 
] 








] 
http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/15583/OEBPS/Text/ . . http: / /www.hzcourse.com/resource/readBook?path-/openresourc 


] 





如 上 例 所 示 ， 每 一 个 域 (domain) 都 包含 若干 属性 。 





- domain: 该 域 的 名 称 。 

“ description: 描述 了 该 域 的 作用 和 涵盖 的 内 容 。 

types: 定义 了 前 后 端 通信 的 JSON 字 符 串 中 的 key， 来 说 明 协 议 数 据 包 中 某 个 属性 段 的 意义 。 

“ commands: 主要 定义 了 前 端 发 给 后 端的 命令 和 请 求 ， 以 及 对 应 的 参数 名 称 、 类 型 和 语义 描述 。 如 上 述 示例 中 的 “enalbe” 命 令 是 前 端 发 给 后 端 InspectorAgent 的 ， 以 使 能 network 域 。 


“events: 定义 了 后 端 发 给 前 端的 事件 ， 以 及 后 端 对 于 前 端 命令 和 请 求 的 回应 。 其 内 部 各 部 分 的 意义 跟 commands 一 致 











在 Chromium 代 码 中 ， 除 了 上 述 几 种 属性 外 ， 每 个 域 还 有 hidden 属 性 ， 如 果 hidden 属 性 为 true， 则 该 域 不 会 出 现在 Google 官 方 文档 中 ， 它 代表 临时 功能 、 在 特定 历史 阶段 产生 的 将 要 被 移 除 的 功能 
研发 中 即将 引入 Chrome 稳 定 版 的 功能 。 

















Inspector.json 文 件 ， 被 脚本 generate-inspector-id| 解 析 ， 生 成 Inspector.idl。 该 id| 文 件 同样 被 第 9 章 介绍 过 的 generate-bindings.pl 解 析 ， 不 过 此 时 用 的 具体 生成 器 (generator) 为 
CodeGeneratorlnspector.pm， 生 成 了 InspectorFrontend.cpp 和 InspectorBackendDispatcher.cpp， 同 时 还 生成 了 InspectorBackendStub.js (在 Chrome 平 台 ， 该 文件 名 为 Inspector- 
BackendCommandsjs) 。 这 些 文 件 以 代码 形式 封装 了 协议 ， 即 Inspectorjson 描 述 的 协议 的 可 编译 运行 的 代码 形态 (InspectorFrontend.cpp 和 InspectorBackendDispatcher.cpp 为 后 端 负责 处 理 JSON 
协议 的 代码 ，InspectorFrontend.cpp 将 发 往 前 端的 事件 封装 成 JSON 格 式 ， 而 InspectorBackendDispatcher.cpp 主 要 对 前 端 发 来 的 JSON 命 令 做 解析 和 分 发 。InspectorBackendStub.js 为 前 端 负责 处 理 
JSON 协 议 的 代码 ) 。 该 部 分 代码 的 应 用 会 在 后 续 章 节 具 体 分 析 ， 此 处 先 为 读者 展示 Inspector 协 议 的 交互 示例 : 



































【一 高 亮 DOM 节 点 协议 交互 】 





// 前 端 发 往 后 端 ， 要 求 高 亮 id 为 2 的 DOM 节 点 

("method" : "DOM. highlightDOMNode", "params":{"nodeId":2},"id":16} 
// 后 端 对 前 端 命令 的 响应 ， 彼 此 通过 id 来 匹配 

["result":(),"id":16) 








上 述 示例 展示 了 前 端 请 求 后 端 高 亮 id 为 2 的 节点 的 协议 交互 流程 ， 对 照 Inspectorjson 的 DOM 域 ， 可 以 从 其 commands 数 组 中 找到 highlightDOMNode 命 令 : 


【一 高 亮 DOM 节 点 协议 定义 】 





"name": "highlightDOMNode", 
"parameters": [ 

{ "name": "nodeId", "type": "integer" } 
] 


] 





对 应 关系 一 目 了 然 。 协 议 交互 流程 只 是 协议 定义 的 JSON RPC (Remote Procedure Call， 远 程 函数 调用 ) 封装 。 比 如 Network 域 中 展示 子 资源 加 载 时 间 的 协议 交互 流程 : 





【一 资源 加 载 协议 交互 示例 】 





// 发 起 资源 请 求 

{"method":"Network.requestWillBeSent", "params":{"identifier":71,"frameId":"1D9C88", "loaderId":"BB6678", "documentURL" : "http: / /m.baidu.com/s?word-$E59A49A75E4*SBAS8CSE5SBBS885E5SE 
// 收 到 服务 器 发 回 的 响应 

{"method":"Network.responseReceived", "params": ("identifier":71,"timestamp":1422075765.763098, "type":"Image", "response":{"status":200,"statusText":"OK", "nimeType" : "image/png", "c 
// 接 收 到 数据 片段 

{"method":"Network.dataReceived", "params": ("identifier":71, timestamp":1422075765.767361,"dataLength":3807, "encodedDataLength" : 3807] ) 

// 接 收 到 数据 片段 

("method" : "Network.dataReceived", "params": {"identifier":71, "timestamp" :1422075765.787034, "dataLength" : 4664, "encodedDataLength" :4664] ) 

// 接 收 到 数据 片段 


i"method" H "Network.dataReceived", "params":í("identifier":71,"timestamp":1422075765.791051, "dataLength":5840, "encodedDataLength" :5840]] 
("nethod" i" Network dataReceived", "params":("identifier":71,"timestamp":1422075765.794164,"dataLength" : 5840, "encodedDataLength" :5840]] 
("nethod" i" Network. dataReceived", "params":("identifier":71,"timestamp":1422075765.795802,"dataLength":5840, "encodedDataLength" :5840}} 
("nethod* Netvork dataheceived", "params":("identifier":71,"timestamp":1422075765.799969,"dataLength":4725, "encodedDataLength" :4725]) 
Rire MAN E "params": ("identifier":71,"timestamp":1422075765.816479)] 





上 述 示例 展示 了 标示 符 为 71 的 资源 的 加 载 流程 ， 包 含 了 从 HTTP 请 求 发 起 到 资源 加 载 完毕 的 每 一 个 HTTP 报 文 的 说 明 ， 以 及 对 应 的 时 间 戳 。 前 端 可 据 此 展示 资源 加 载 的 全 部 信息 。 示 例 中 展示 的 每 一 个 
method 都 是 Inspectorjson 中 Network 域 中 定义 的 events 的 实例 ， 每 一 个 事件 都 是 由 后 端 发 往 前 端 。 





对 比 event 和 command 的 JSON RPC 命 令 文 本 ， 读 者 可 能 已 经 注意 到 command 带 有 id 域 ， 而 event 没 有 id 域 。 因 为 前 端 发 给 后 端的 命令 (command) ， 多 数 都 需要 后 端的 响应 (response) ， 命 令 与 
响应 需要 根据 ID 建立 对 应 关系 ， 前 端 根据 这 个 对 应 关系 处 理 后 端 发 来 的 响应 。 而 对 于 event， 后 端 只 需要 将 其 发 给 前 端 即 可 ， 消 息 内 容 完全 自 描述 ， 不 用 维护 上 下 文 。 























11.3 Remote Inspector 实 现 结构 


Inspector 有 两 种 存在 形式 。 一 种 形式 为 调试 前 端 和 后 端 存 在 于 同一 浏览 器 ，PC 上 的 浏览 器 多 采用 这 种 形态 ， 比 如 Chrome、Safari 等 。 另 一 种 形式 为 前 端 位 于 功能 强大 、 资 源 丰 富 且 交互 方便 的 PC， 而 
后 端 位 于 小 型 设备 (比如 手机 或 PAD) ， 这 种 形式 就 是 Remote Inspector。 单 从 技术 上 讲 ， 在 手机 上 实现 与 PC 上 一 样 的 调试 方式 是 完全 可 以 的 ， 但 毕竟 手机 屏幕 太 小 ， 这 样 的 实现 交互 体验 会 非常 差 (图 
11-2) 。 
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图 11-2 Remote Inspectorzr ff] 























本 节 的 重点 放 在 Android 平 台 常 采用 的 Remote Inspectorzxt, Remote Inspector 的 实现 主体 也 对 应 分 成 三 部 分 ， 前 端 、 后 端 和 协议 信道 。 承 接 11.2 节 ， 首 先 分 析 协 议 信 道 。 




















11.4 Javascript 调试 














要 调试 Javascript 首 先 需 要 V8 引 警 的 支持 ，V8 提 供 了 两 种 方式 来 支持 javascript 的 调试 : 一 种 是 基于 JSON RPC 消 息 的 调试 协议 ; 另 一 种 是 基于 V8 内 建 在 DebugContext 中 相关 的 JavaScript 调 试 对 象 来 
实施 调试 。 第 一 种 API 多 用 于 跨 进程 调试 ， 第 二 种 API 多 用 于 进程 内 调试 。Android WebKit 使 用 的 是 第 二 种 APl。 


















































Oze 在 V8 的 wiki 中 有 专门 的 页 面 介绍 第 一 种 协议 ， 有 兴趣 的 读者 可 以 参考 : https:/ /code.google.com/p/v8-wiki/wiki/DebuggerProtocol 








在 具体 分 析 Inspector JS 调 试 的 交互 之 前 ， 先 简要 介绍 一 下 V8 中 DebugContext 提 供 的 调试 支持 。V8 DebugContext 中 提供 的 调试 对 象 接口 主要 在 v8/src/debug-debugger.js, liveedit-debugger.js 
和 mirror-debuggerjs 是 一 些 简单 的 扩展 。debug-debuggerjs 中 Debug 对 象 的 各 个 属性 函数 即 为 调试 API， 比 如 Debug.enableBreakPoint、Debug.disableBreakPoint 等 ，API 的 名 称 反映 了 其 功能 。 浏 
览 器 中 JS 调试 的 具体 操作 是 直接 调用 这 些 APl 来 完成 的 。 浏 览 器 中 调用 Debug 对 象 调 试 API 的 代码 在 WebCore/bindings/v8/Debuggerscriptjs 中 ， 该 JS 文件 提供 的 各 个 调试 功能 函数 在 C+ + 代码 中 被 
bindings/v8/ScriptDebugServer 类 调用 ，PageScriptDebugServer 继 承 了 ScriptDebugServer 的 所 有 行为 ， 是 Inspector 前 端 各 种 JS 调 试 命令 进入 V8 的 通道 。 






















































































ScriptDebugServer 的 主要 功能 函数 的 实现 非常 类 似 ， 封 装 的 都 是 调用 DebugContext 中 JS 代码 的 行为 ， 此 处 以 clearBreakPoints 为 例 : 











[^ScriptDebugServer::clearBreakpoints] 





// 将 DebuggerScript.js 导 入 V8 的 DebugContext 

ensureDebuggerScriptCompiled(); 

v8::HandleScope scope; 

// 得 到 DebugContext 

v8::Local«v8::Context» debuggerContext = v8::Debug::GetDebugContext () 7 

v8::Context::Scope contextScope (debuggerContext); 

// 3k. DebuggerScript.js'P DebuggerScript.clearBreakpoints$4 & 5| 

v8::Handle«v8::Function» clearBreakpoints = v8::Local«v8::Function»::Cast (m debuggerScript.get()-» 
Get (v8: :String::New ("clearBreakpoints"))); 

// 调 用 DebuggerScript .js 中 的 函数 DebuggerScript.clearBreakpoints 


V8: :Debug: :Call(clearBreakpoints); 























其 中 ，ensureDebuggerScriptCompiled0 浮 数 负责 将 DebuggerScript.js 定 义 的 对 象 和 属性 函数 导入 V8 的 DebugContext， 后 面 会 具体 介绍 其 实现 以 及 m_debuggerScript 对 象 的 初始 化 。 














回 到 Inspector JS 调试 的 话题 ， 后 端 浏览 器 Js 调试 的 环境 构建 要 从 编译 时 说 起 。 编 译 时 xxd.pl 读 取 文 件 Debuggerscriptjs 的 内 容 ， 将 文件 的 AsCll 数 据 生成 数组 : 





const unsigned char DebuggerScriptSource js[]- {777 二 














该 数组 存在 于 脚本 生成 的 DebuggerScriptSource.h 文 件 中 ， 该 头 文件 被 WebCore/bindings/v8/ScriptDebuggerServer.cpp 引 用 。 














浏览 器 运行 过 程 中 ， 启 动 JS 调试 时 ， 前 端 向 后 端 发 来 使 能 调试 的 命令 : 





{ "method" :" Debugger.enable" ," id” :xxxx) 





该 命令 在 后 端的 分 发 与 11.3.2 节 介绍 的 highlightDOM Node 命 令 的 分 发 过 程 类 似 ， 分 发 给 了 对 应 域 的 Agent 一 InspectorDebuggerAgent 对 象 的 enable 函 数 。 
[^InspectorDebuggerAgent::enable] 


// 记 录 状 态 

m inspectorState-»setBoolean (DebuggerAgentState::debuggerEnabled, true); 
m instrumentingAgents-»setInspectorDebuggerAgent (this); 

/7 清理 现场 ， 准 备 调 试 的 环境 

scriptDebugServer () .clearBreakpoints (); 

scriptDebugServer () . setBreakpointsActivated (true); 

// 向 V8 注册 监听 调试 事件 的 回调 函数 ， 准 备 监 听 V8 中 调试 状态 的 反馈 
startListeningScriptDebugServer () 7 


























前 面 举 例 介绍 了 ScriptDebugServer::clearBreakpoints 的 实现 ， 其 中 调用 了 ensureDebugger-ScriptCompiled()， 此 处 分 析 一 下 它 是 如 何 将 DebuggerScriptjs 定 义 的 对 象 和 属性 函数 导入 V8 的 
DebugContext 中 。 


[^ScriptDebugServer::ensureDebuggerScriptCompiled] 





// 该 函数 是 单线 程 可 重 入 的 ， 首 先 判断 m delbuggerScript 对 象 是 否 已 经 初始 化 
if (m debuggerScript.get().IsEmpty()) { 

v8::HandleScope scope; 

v8::Local«v8::Context» debuggerContext = v8::Debug::GetDebugContext (); 
v8::Context::Scope contextScope (debuggerContext) ; 
// DebuggerScriptSource js 是 DebuggerScript.js 的 数组 表示 

String debuggerScriptSource (reinterpret cast«const charx*> (DebuggerScriptSource js), 

sizeof (DebuggerScriptSource js)); T T 

// 编 译 并 执行 DebuggerScript.js， 此 后 C++ 代码 可 以 调用 其 中 的 各 种 JS API， 并 初始 化 了 
//m debuggerScript 对 象 
m debuggerScript.set (v8: :Handle<v8: :Object>: :Cast (v8: :Script::Compile (v8String 
(debuggerScriptSource) )->Run () )); 
l 








Debuggerscriptjs 导 入 V8 的 DebugContext 后 ， 前 端的 各 种 调试 命令 进入 V8 的 通道 建立 起 来 ， 前 端 发 给 后 端的 各 种 命令 ， 比 如 设置 断 点 、 单 步 执行 等 ， 经 过 11.3 节 介绍 的 JSON 命 令 传递 流程 ， 最 终 由 
ScriptDebugServer 调 用 DebuggerScript:js 的 JS 函数 而 得 到 执行 。 
































那么 调试 过 程 中 ，V8 内 部 的 调试 事件 如 何 通知 到 WebCore 进 而 通知 到 前 端 呢 ? 答案 在 InspectorDebuggerAgent 的 enable 函 数 中 调用 的 startListeningScriptDebugSserver( 函 数 ， 它 间接 调用 了 
PageScriptDebugServer:addListener 函 数 ， 在 该 函数 内 部 向 V8 注 册 了 调试 事件 回调 函数 v8DebugEventCallback : 











v8: :Debug: : SetDebugEventListener2 (&PageScriptDebugServer: :v8DebugEventCallback, 
v8::External::New(this)); 


该 函数 是 PageScriptDebugServer 从 ScriptDebugServer 中 继承 来 的 。v8DebugEvent-Callback 再 通过 InspectorDebuggerAgent 将 V8 中 产生 的 调试 事件 发 向 前 端 ， 比 如 JS 代码 执行 到 断 点 后 产生 的 
Debugger.Paused 事 件 等 。 























Javascript 调 试 过 程 中 ， 具 体 到 某 些 Inspector 前 端 发 给 后 端的 命令 或 者 后 端 发 给 前 端的 事件 的 传递 ， 其 过 程 与 11.3 节 分 析 的 非常 类 似 。 此 处 不 再 展开 代码 的 调用 流程 。 














11.5 ”本 章 小 结 





本 章 介绍 了 浏览 器 调试 工具 一 一 WebKit Inspector 的 结构 和 实现 细节 ， 主 要 涉及 Inspector 的 协议 、Remote Inspector 的 信道 等 ， 并 且 结 合 实例 分 析 了 Inspector 的 前 端 和 后 端的 代码 结构 和 工作 原理 。 
鉴于 JavaScript 调 试 的 特殊 性 ，11.4 节 分 析 了 Inspector 实 现 JavaScript 调 试 的 原理 。 本 章 内 容 对 浏览 器 引擎 开发 者 和 前 端 开 发 者 都 有 重要 的 意义 。 





























